templates/content/gallery.html.twig line 1

Open in your IDE?
  2. {% extends "base.html.twig" %}
  3. {% block body %}
  5. {% embed "1-col-sidebar.html.twig" %}
  7. {% block column %}
  9.  {% if site_code == constant("App\\Entity\\Content::SITE_RCS") %}
  10.         {% include  "includes/curtain-ads/newForum.html.twig" %}
  11.  {% endif %}
  15.     <h1>{{content.getTitle()}}</h1>
  16.     <br>
  17.     
  18.     <div class="post--content">
  19.         {{ content.getContentFull() | wordpress | raw }}
  20.     </div>
  21.     
  23.     {#
  24.     {% for mgroup in content.getMediaGroups() %}
  25.         <h4 class="gallery-title">{{ mgroup.getTitle() }}</h4>
  26.         <h4 class="gallery-description">{{ mgroup.getDescription() }}</h4>
  27.         <div class="row">
  28.         {% for mitem in mgroup.getMediaGroupItems() %}
  29.             {% if mitem.getMedia() is not empty %}
  30.                 {% set media = mitem.getMedia() %}
  31.                 <div class="col-md-3 galleryitem">
  32.                     <a href="{{media.getURL()}}">{{ media.getImageTag("","")|raw }}</a>
  33.                     <div class="gallery-item-description">{{media.getDescription()}}</div>
  34.                 </div>
  35.             {% endif %}
  36.         {% endfor %}
  37.         </div>
  38.     {% endfor %}
  39.     #}
  40.     
  41.     {% for mgroupc in content.getMediaGroupContainers() %}
  42.         {% set mgroup = mgroupc.getMediaGroup() %}
  43.         {% if mgroup %}
  44.             <h4 class="gallery-title">{{ mgroup.getTitle()|raw }}</h4>
  45.             <div class="row">
  46.             {% for mitem in mgroup.getMediaGroupItemsForGallery() %}
  47.                 {% if mitem.getMedia() is not empty %}
  48.                     {% set media = mitem.getMedia() %}
  49.                     <div class="col-md-3" style="padding: 0px 20px 20px;">
  50.                         <div class="row">
  51.                             <div class="col-12 galleryitem">
  52.                                 {% if mitem.getExternalUrl() %}
  53.                                     <i style="position: absolute; top: 3px; right: 3px;" class="fa fa-external-link" aria-hidden="true"></i>
  54.                                     <a href="{{mitem.getExternalUrl()}}">{{ media.getImageTag("","")|raw }}</a>
  55.                                 {% else %}
  56.                                     {{ media.getImageTag("myImg","")|raw }}
  57.                                 {% endif %}
  60.                                 
  61.                             </div>
  62.                             <div class="col-12">
  63.                                 <div class="gallery-item-description">{{mitem.getDescription()}}</div>
  64.                             </div>
  65.                         </div>
  66.                     </div>
  67.                 {% endif %}
  68.             {% endfor %}
  69.             </div>
  70.             <div class="gallery-description">{{ mgroup.getDescription()|raw }}</div>
  71.             <!-- pop up image -->
  72.             <div id="myModal" class="modal">
  73.             <span class="close">&times;</span>
  74.             <img class="modal-content" id="img01" loading='lazy'>
  75.             <div id="caption"></div>
  76.             </div>
  77.             <script type="text/javascript">
  78.                 $( document ).ready(function() {
  79.                     
  80.                 
  81.                     const modal = document.getElementById("myModal");
  83.                     const img = document.getElementsByClassName("myImg");
  84.                     const modalImg = document.getElementById("img01");
  85.                     const captionText = document.getElementById("caption");
  86.                     for (var i = 0; i < img.length; i++) {
  87.                         img[i].addEventListener("click", function(event){
  88.                         event.preventDefault();
  89.                         modal.style.display = "flex";
  90.                         modalImg.src = this.src;
  91.                         captionText.innerHTML = this.alt;
  92.                     })
  93.                     }
  94.                     const span = document.getElementsByClassName("close")[0];
  95.                     const container = document.getElementById('myModal')
  96.                     container.onclick = function() {
  97.                         modal.style.display = "none";
  98.                     }
  99.                     span.onclick = function() {
  100.                         modal.style.display = "none";
  101.                     }
  102.                 });
  103.         </script>
  104.         {% endif %}
  105.     {% endfor %}
  106.     {% include "includes/social-share.html.twig" %}
  107. {% endblock %}
  109. {% endembed %}
  110. {% endblock %}