{% extends "base.html.twig" %}
{% block body %}
{% embed "1-col-sidebar.html.twig" %}
{% block column %}
{% if site_code == constant("App\\Entity\\Content::SITE_RCS") %}
{% include "includes/curtain-ads/newForum.html.twig" %}
{% endif %}
<h1>{{content.getTitle()}}</h1>
<br>
<div class="post--content">
{{ content.getContentFull() | wordpress | raw }}
</div>
{#
{% for mgroup in content.getMediaGroups() %}
<h4 class="gallery-title">{{ mgroup.getTitle() }}</h4>
<h4 class="gallery-description">{{ mgroup.getDescription() }}</h4>
<div class="row">
{% for mitem in mgroup.getMediaGroupItems() %}
{% if mitem.getMedia() is not empty %}
{% set media = mitem.getMedia() %}
<div class="col-md-3 galleryitem">
<a href="{{media.getURL()}}">{{ media.getImageTag("","")|raw }}</a>
<div class="gallery-item-description">{{media.getDescription()}}</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endfor %}
#}
{% for mgroupc in content.getMediaGroupContainers() %}
{% set mgroup = mgroupc.getMediaGroup() %}
{% if mgroup %}
<h4 class="gallery-title">{{ mgroup.getTitle()|raw }}</h4>
<div class="row">
{% for mitem in mgroup.getMediaGroupItemsForGallery() %}
{% if mitem.getMedia() is not empty %}
{% set media = mitem.getMedia() %}
<div class="col-md-3" style="padding: 0px 20px 20px;">
<div class="row">
<div class="col-12 galleryitem">
{% if mitem.getExternalUrl() %}
<i style="position: absolute; top: 3px; right: 3px;" class="fa fa-external-link" aria-hidden="true"></i>
<a href="{{mitem.getExternalUrl()}}">{{ media.getImageTag("","")|raw }}</a>
{% else %}
{{ media.getImageTag("myImg","")|raw }}
{% endif %}
</div>
<div class="col-12">
<div class="gallery-item-description">{{mitem.getDescription()}}</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class="gallery-description">{{ mgroup.getDescription()|raw }}</div>
<!-- pop up image -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01" loading='lazy'>
<div id="caption"></div>
</div>
<script type="text/javascript">
$( document ).ready(function() {
const modal = document.getElementById("myModal");
const img = document.getElementsByClassName("myImg");
const modalImg = document.getElementById("img01");
const captionText = document.getElementById("caption");
for (var i = 0; i < img.length; i++) {
img[i].addEventListener("click", function(event){
event.preventDefault();
modal.style.display = "flex";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
})
}
const span = document.getElementsByClassName("close")[0];
const container = document.getElementById('myModal')
container.onclick = function() {
modal.style.display = "none";
}
span.onclick = function() {
modal.style.display = "none";
}
});
</script>
{% endif %}
{% endfor %}
{% include "includes/social-share.html.twig" %}
{% endblock %}
{% endembed %}
{% endblock %}