templates/Resources/resource_detail.html.twig line 1

Open in your IDE?
  1. {% extends "layout/layout.html.twig" %}
  2. {# {% block title %}GFS - {{resource.name}}{% endblock %} #}
  4. {% block content %}
  6.     <section class="resource-banner">
  7.       <div class="resource-banner-media">
  8.         <figure class="resource-banner-media-img">
  9.           <img src="{{resource.resource_banner}}" alt="cooking-banner">
  10.           {# {% if resource.resource_banner %}
  11.           {{ resource.resource_banner.thumbnail('1903x1070').getHTML({imgAttributes: {class:'',alt: "cooking-banner"}}) | raw }}
  12.           {% endif %} #}
  13.         </figure>
  14.       </div>
  15.     </section>
  16.     <!-- End banner -->
  18.     <!--Start Main training search-->
  19.     <section class="bread-crumbs-section resources-breadcrumb">
  20.       <div class="container container-lg">
  21.         <div class="bread-crumbs-section-box">
  22.           <div class="breadcrumb-holder">
  23.             <ol class="breadcrumb">
  24.               <li class="breadcrumb-item"><a href="/{{app.request.locale}}">{{'Home'|trans}}</a></li>
  25.               <li class="breadcrumb-item"><a href="/{{app.request.locale}}/resources">{{'Resources'|trans}}</a></li>
  26.               {% if resource.category is defined %}
  27.               <li class="breadcrumb-item"><a href="/{{app.request.locale}}/resources/{{resource.category.url}}">{{resource.category.name}}</a></li>
  28.               {% endif %}
  29.               <li class="breadcrumb-item">{{resource.name}}</li>
  30.             </ol>
  31.           </div>
  32.         </div>
  33.       </div>
  34.     </section>
  35.     <!--End Main training search-->
  36. <div id ="invoice">
  37.     <!-- Start Article -->
  38.     <section class="resource-article">
  39.       <div class="container container-sm">
  40.   
  41.         {% if newsletter %}
  42.         <div class="col-12 newsletterBanner-v2">
  43.           <div class="row gy-4">
  44.             <div class="col-lg-6">
  45.               <h3 class="heading">
  46.                 {% if newsletter and newsletter.title is not null %}
  47.                   {{newsletter.title}}
  48.                 {% endif %}
  49.               </h3>
  50.               <div class="content">
  51.                 <div class="imgLeft d-md-none">
  52.                   {% if newsletter and newsletter.pdf is not null %}
  53.                     <a href="{{newsletter.pdf}}" target="_blank">
  54.                       {% if newsletter.detailImageMobile %}
  55.                         <img src="{{newsletter.detailImageMobile}}" alt="Newsletter-Image-Mobile">
  56.                       {% endif %}     
  57.                     </a>
  58.                   {% endif %}
  59.                   
  60.                 </div>
  61.                 <div class="contentDesc">
  62.                   <p>
  63.                     {% if newsletter and newsletter.description is not null %}
  64.                       {{newsletter.description}}
  65.                     {% endif %}
  66.                   </p>
  67.                   {% set user = app.session.get('loginUserName') %}
  68.                   {% if newsletterPdf %}
  69.                     {% if user is not null %}
  70.                       <a href="{{newsletterPdf}}" target="_blank" class="btn btn-custom btn-lg-o-yellow-white mt-md-5">
  71.                         {{"Read our Newsletter" | trans}}
  72.                       </a>
  73.                     {% else %}
  74.                       <a href="javascript:void(0);" onclick="storePdfForLater('{{ newsletterPdf }}')" class="btn btn-custom btn-lg-o-yellow-white mt-md-5">
  75.                         {{"Read our Newsletter" | trans}}
  76.                       </a>
  77.                     {% endif %}
  78.                   {% endif %}
  79.                 </div>
  80.               </div>
  81.             </div>
  82.             <div class="col-lg-6 d-none d-md-block pt-4 pt-lg-0">
  83.               <div class="imgRight">
  84.               {% if newsletter and newsletter.pdf is not null %}
  85.                 <a href="{{newsletter.pdf}}" class="w-100" target="_blank">
  86.                   {% if newsletter.detailImage %}
  87.                     <img src="{{newsletter.detailImage}}" class="w-100" alt="Newsletter-Image">
  88.                   {% endif %}     
  89.                 </a>
  90.               {% endif %}
  91.               </div>
  92.             </div>
  93.           </div>
  94.         </div>
  95.         {% endif %}
  96.       <div class="col-12">
  97.         <div class="row justify-content-center mb-5">
  98.           
  99.           <div class="col-12 px-0  d-none">
  100.           {% if (app.request.locale =='en') %}
  101.             <a href="https://zoom.us/webinar/register/6417301077993/WN_Uy4Xiz0OT2SuJn0cCsaSUQ" class="banner-transition-update">
  102.               <img class="img-fluid w-100" src="/resourcebanner/webinar-announcement-EN.jpg" alt="webinar announcement">
  103.             </a>
  104.             {% else %}
  105.             <a href="https://zoom.us/webinar/register/6417301077993/WN_Uy4Xiz0OT2SuJn0cCsaSUQ" class="banner-transition-update">
  106.               <img class="img-fluid w-100" src="/resourcebanner/webinar-announcement-AR.jpg" alt="webinar announcement">
  107.             </a>
  108.           {% endif %}
  109.           </div>
  110.           <div class="col-12 d-none ">
  111.             <a href="https://zoom.us/webinar/register/6417301077993/WN_Uy4Xiz0OT2SuJn0cCsaSUQ" >
  112.               <img class="img-fluid w-100" src="/resourcebanner/webinar-announcement-responsive.jpg" alt="webinar announcement responsive">
  113.             </a>
  114.           </div>
  115.         </div>
  116.       </div>
  117.         <div class="row">
  118.           <div class="col-xl-9">
  119.             <div class="resource-article-info">
  120.               <h5>{{resource.category.name}}</h5>
  121.               <h1 class="resource-blog">{{resource.name}}</h1>
  122.                {% set user = app.session.get('loginUserName') %}
  123.                {% if user is not null %}
  124.               <ul class="list-unstyled recipe-info">
  125.                 <li class="share"  onclick = "loyaltyProgram(this, {{ resource.id }},'{{ resource.name }}',10,'Article','Share')"><span onclick = "sharemodal('Article','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/resource/' ~ resource.url}}','{{ "SHARE KNOWLEDGE WITH YOUR FRIENDS"|trans }}')">{{'Share'|trans}}</span></li>
  126.                 {% if Liked_detail_article|length == 0 %}
  127.                 <li class="like article-detail"  onclick = "loyaltyProgram(this, {{ resource.id }},'{{ resource.name }}',10,'Article','Like', '{{app.request.locale}}')">{{'Like'|trans}}</li>
  128.                 {% else %}
  129.                       <li class= 'liked'>{{'Like'|trans}}</li>
  131.                 {% endif %}
  132.                 <li class="download-black d-none" id ="download" onclick = "loyaltyProgram(this, {{ resource.id }},'{{ resource.name }}',10,'Article','Save')">{{'Download'|trans}}</li>
  133.               </ul>
  134.               {% else %}
  135.               <ul class="list-unstyled recipe-info">
  136.                 <li class="share" onclick = "sharemodal('Article','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/resource/' ~ resource.url}}','{{ "SHARE KNOWLEDGE WITH YOUR FRIENDS"|trans }}')">{{'Share'|trans}}</li>
  137.                 <li class="like logged-out">{{'Like'|trans}}</li>
  138.                 <li class="download-black d-none" id ="download">{{'Download'|trans}}</li>
  139.               </ul>
  140.               {% endif %}
  141.               <p class="resource-article-info-qoute">{{resource.main_description | raw}}</p>              
  142.               {% for description in resource.resources %}
  143.                 {% if description.localizedfields.data.getLocalizedValue('resource_heading') %}
  144.                   <h2 class="resource-blog">{{description.localizedfields.data.getLocalizedValue('resource_heading')}}</h2>
  145.                 {% endif %}
  146.                 <p>{{description.localizedfields.data.getLocalizedValue('description')|raw}}</p>
  147.                 {% if description.localizedfields.data.getLocalizedValue('resource_video') %}
  148.                   <div class="media-section">
  149.                     <video poster="assets/images/media-01.png">
  150.                       <source src="/static/assets/videos/oceans.mp4" type="video/mp4">
  151.                       Your browser does not support the video tag.
  152.                     </video>
  153.                     <div class="control-options">
  154.                       <i class="fas fa-play-circle"></i>
  155.                       <i class="fas fa-pause-circle"></i>
  156.                     </div>
  157.                   </div>
  158.                 {% endif %}
  159.                 {% if description.localizedfields.data.getLocalizedValue('resource_image') %}
  160.                 <div class="resource-article-info-media">
  161.                   <figure class="resource-article-info-media-img">
  162.                     <img src="{{description.localizedfields.data.getLocalizedValue('resource_image')}}" alt="article-img">
  163.                   </figure>
  164.                 </div>
  165.                 {% endif %}
  166.               {% endfor %}
  167.               {% set user = app.session.get('loginUserName') %}
  168.                {% if user is not null %}
  169.               <ul class="list-unstyled recipe-info">
  170.                 <li class="share"  onclick = "loyaltyProgram(this,{{ resource.id }},'{{ resource.name }}',10,'Article','Share')"><span onclick = "sharemodal('Article','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/resource/' ~ resource.url}}','{{ "SHARE KNOWLEDGE WITH YOUR FRIENDS"|trans }}')">{{'Share'|trans}}</span></li>
  171.                 {% if Liked_detail_article|length == 0 %}
  172.                 
  173.                 <li class="like article-detail"  onclick = "loyaltyProgram(this,{{ resource.id }},'{{ resource.name }}',10,'Article','Like', '{{app.request.locale}}')">{{'Like'|trans}}</li>
  174.                 {% else %}
  175.                       <li class= 'liked'>{{'Like'|trans}}</li>
  177.                 {% endif %}
  178.                 <li class="download-black d-none" id ="download" onclick = "loyaltyProgram(this,{{ resource.id }},'{{ resource.name }}',10,'Article','Save')">{{'Download'|trans}}</li>
  179.               </ul>
  180.               {% else %}
  181.               <ul class="list-unstyled recipe-info">
  182.                 <li class="share" onclick = "sharemodal('Article','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/resource/' ~ resource.url}}','{{ "SHARE KNOWLEDGE WITH YOUR FRIENDS"|trans }}')">{{'Share'|trans}}</li>
  183.                 <li class="like logged-out">{{'Like'|trans}}</li>
  184.                 <li class="download-black d-none" id ="download">{{'Download'|trans}}</li>
  185.               </ul>
  186.               {% endif %}
  188.               {# <div class = "refrances">
  189.               {% if resource.references_links %}
  190.                 <div class = "refrances-links">
  191.                   <h3>{{'References'|trans}}</h3>
  192.                   <ul class="list-unstyled">
  193.                   
  194.                   {% for refrences in resource.references_links %}
  195.                     <li><a href = "{{refrences.references.data}}">{{refrences.references.data}}</a></li>
  196.                     {% endfor %}
  197.                     
  198.                 
  199.               </ul>
  201.                 </div>
  202.                 {% endif %}
  203.               </div> #}
  205.             </div>
  206.           </div>
  207.           <div class="col-xl-3">
  208.             <div class="resource-article-related">
  209.               <!--Start Featured Recipes Section-->
  210.               <section class="featured-recipes-section inner-frecipes-section all-event-section related-article-section">
  211.                 <div class="container container-sm">
  212.                   <h2 class="heading related-article-headingg">{{'Related Articles'|trans}}</h2>
  213.                   <div class="featured-recipes">
  214.                     <div class="custom-slider">
  215.                       {% if resource.related_article %}
  216.                         {% for article in resource.related_article %}
  217.                         <div class="slide-holder">
  218.                           <div class="slide-holder">
  219.                            <a href="/{{app.request.locale}}/resource/{{article.url}}">
  220.                             <figure class="slide-img">
  221.                               <img src="{{article.image}}" alt="{{ article.name }}">
  222.                             </figure><a/>
  223.                             <div class="slide-content">
  224.                               <div class="frecipes-box">
  225.                                 <a href="/{{app.request.locale}}/resource/{{article.url}}" class="text-decoration-none"><h3>{{article.name}}</h3></a>
  226.                                 <p>{{article.main_description}}</p>
  227.                               </div>
  228.                               {% set user = app.session.get('loginUserName') %}
  229.                               {% if user is not null %}  
  230.                               <ul class="list-unstyled recipe-info">
  231.                                 <li class="share"  onclick = "loyaltyProgram(this,{{ article.id }},'{{ article.name }}',10,'Article','Share')"><span onclick = "sharemodal('Article','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/resource/' ~ article.url}}','{{ "SHARE KNOWLEDGE WITH YOUR FRIENDS"|trans }}')">{{'Share'|trans}}</span></li>
  232.                                 {% if article.id in Liked_related_article_Ids %}
  233.                                  <li class= 'liked'>{{'Like'|trans}}</li>
  234.                                   {% else %}
  235.                                     <li class="like related_article"  onclick = "loyaltyProgram(this,{{ article.id }},'{{ article.name }}',10,'Article','Like', '{{app.request.locale}}')">{{'Like'|trans}}</li>
  237.                                   {% endif %}
  238.                                 
  239.                                 <li class="download-black d-none"  onclick = "loyaltyProgram(this,{{ article.id }},'{{ article.name }}',10,'Article','Save')">{{'Download'|trans}}</li>
  240.                               </ul>
  241.                               {% else %}
  242.                               <ul class="list-unstyled recipe-info">
  243.                                 <li class="share" onclick = "sharemodal('Article','{{ app.request.getSchemeAndHttpHost() ~ '/' ~ app.request.locale ~ '/resource/' ~ article.url}}','{{ "SHARE KNOWLEDGE WITH YOUR FRIENDS"|trans }}')">{{'Share'|trans}}</li>
  244.                                 <li class="like logged-out"  >{{'Like'|trans}}</li>
  245.                                 <li class="download-black d-none"  >{{'Download'|trans}}</li>
  246.                               </ul>
  247.                               {% endif %}
  248.                             </div>
  249.                           </div>
  250.                         </div>
  251.                         {% endfor %}
  252.                       {% else %}
  253.                       No Related Article
  254.                       {% endif %}
  255.                     </div>
  256.                   </div>
  257.                 </div>
  258.               </section>
  259.               <!--End Featured Recipes Section-->
  260.             </div>
  261.           </div>
  262.         </div>
  263.       </div>
  264.     </section>
  265.     <!-- End Article -->
  266. </div>
  267.         <!--Start Category Section -->
  268.            <section class="featured-categories resource-featured-categories">
  269.             <div class="container container-sm">
  270.               <div class="featured-categories-section">
  271.                 <h2 class="heading">{{'More Topics'|trans}}</h2>
  272.                 <div class="featured-categories-section-wrapper">
  273.                   {%  for topic in more_topics %}
  274.                   <div class="featured-categories-section-wrapper-item">
  275.                   <a href="/{{app.request.locale}}/resources/{{topic.url}}">
  276.                     <figure class="featured-categories-section-wrapper-item-video">
  277.                       <div class="media-section">                
  278.                         <video poster="{{topic.image}}" playsinline>
  279.                           {% if topic.video.data is defined %}                  
  280.                           <source src="{{ topic.video.data }}" type="video/mp4">
  281.                           {% endif %}
  282.                           Your browser does not support the video tag.
  283.                         </video>
  284.                         {# <div class="control-options">
  285.                           <i class="fas fa-play-circle"></i>
  286.                           <i class="fas fa-pause-circle"></i>
  287.                         </div> #}
  288.                       </div>
  289.                     </figure></a>
  290.                     <div class="featured-categories-section-wrapper-item-content">
  291.                       <a href="/{{app.request.locale}}/resources/{{topic.url}}" class="featured-categories-section-wrapper-item-content-btn">
  292.                         {{topic.name}}
  293.                       </a>
  294.                     </div>
  296.                   </div>
  297.                   {% endfor %}
  298.                 </div>
  299.               </div>
  300.             </div>
  301.           </section>
  302.         <!--End Category Section -->
  303.     {% if (app.request.locale =='ar') %}
  304.       {% set topMenu ="/en/resource/" ~ resource.url('en') %}
  305.     {% else %}
  306.       {% set topMenu ="/ar/resource/" ~ resource.url('en') %}
  307.     {% endif %}
  308.  <script>
  309.  var _TopMenuLink = "{{ topMenu }}";
  310.  $(document).ready(function(){
  311.   //loyaltyProgram(this,{{ resource.id }},'{{ resource.name }}',50,'Article','Viewed')
  312.  });
  313.  {# document.addEventListener("DOMContentLoaded", () => {
  314.     const start = new Date().getTime();
  315.     window.addEventListener("beforeunload", () => {
  316.         const end = new Date().getTime();
  317.         const totalTime = (end - start) / 1000
  318.     
  319.         console.log(totalTime)
  320.     });
  321. }); #}
  324.  </script>
  326.  <script type="text/javascript">
  327.     // This code is Vanilla JS, you can equivalently use jQuery
  328.     // $(document).ready() or $(window).on()
  330.     let timeSpentScrolling = 0;
  332.     let isHalted = false;
  333.     let haltedStartTime, haltedEndTime;
  334.     let totalHaltedTime = 0;
  336.     const update_halt_state = () => {
  337.       if (isHalted) {
  338.         isHalted = false;
  339.         haltedEndTime = new Date().getTime()
  340.         totalHaltedTime += (haltedEndTime - haltedStartTime) / 1000
  341.       } else {
  342.         isHalted = true;
  343.         haltedStartTime = new Date().getTime()
  344.       }
  345.     }
  347.     // Listen for scroll events
  348.     window.addEventListener('scroll', () => {
  349.       timeSpentScrolling += 1.8;
  351.       update_halt_state()
  352.     });
  355.     document.addEventListener("DOMContentLoaded", () => {
  356.       const start = new Date().getTime();
  358.       // AVERAGE SCROLLING INTERVAL - 60 seconds
  359.       setInterval(() => {
  360.         if (new Date().getTime() - start > 60000) {
  361.           update_halt_state()
  362.            $(document).ready(function(){
  363.           loyaltyProgram(this,{{ resource.id }},'{{ resource.name }}',50,'Article','Viewed')
  364.         });
  365.         }
  366.       }, 39000)
  368.       window.addEventListener("beforeunload", () => {
  369.         const end = new Date().getTime();
  371.         update_halt_state()
  373.         const totalTime = ((end - start) / 1000) - (timeSpentScrolling / 1000) - totalHaltedTime
  374.         //navigator.sendBeacon("https://topapi2.free.beeceptor.com", totalTime)
  375.       });
  377.     });
  378. </script>
  379.   <!-- Resource Listing More Topics End -->
  380. {% endblock %}
  381. {% block footer %}
  382.   {% include "includes/footer.html.twig" %}
  383. {% endblock %}