templates/news/detail.html.twig line 1

{% extends 'base.html.twig' %}

{% block title %}{{ item.title }} | News | {{ parent() }}{% endblock %}
{% block meta %}
{% if not item.meta is empty %}
<meta name="description" content="{{ item.meta }}">
{% else %}
{{ parent() }}
{% endif %}
{% if not item.metaimage is empty %}
<meta name="image" property="og:image" content="{{ absolute_url(asset( item.metaimage)  | imagine_filter('og_image')) }}">
{% elseif not item.foto is empty  %}
<meta name="image" property="og:image" content="{{ absolute_url(asset( item.foto)  | imagine_filter('og_image')) }}">
{% endif %}
{% endblock meta %}
{% block body %}
<section class="news-detail inverse" >
    <div class="container-fluid container-iocb">
        <div class="row">
            <div class="col-iocb content-wrapper dash">
                <p class="datum">{{ item.datum|date('d/m/Y') }}</p>
                <h1 class="h2">{{ item.title }}</h1>
                <div class="row">
                    <div class="col-12">
                        {% if item.foto %}<img src="{{ asset( item.foto)  | imagine_filter('news_main') }}" alt="" class="illustration">{% endif %}
                        <p class="credit">{{ item.credit }}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-iocb content main-content">
                        {{ item.content|raw }}
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="row"  data-controller="gallery">
            <div class="col-12 content-wrapper">
                <div id="gallery-carousel" class="carousel slide gallery-carousel" data-bs-ride="false">
                    <div class="carousel-inner">
                      {% for image in item.fotos %}
                        {% if loop.index == 1 or loop.index0 is divisible by(3) %}
                            {% if loop.index != 1 %}
                                </div>
                            </div>  
                        {% endif %}
                        <div class="carousel-item{{ loop.index0 == 0 ? ' active' : '' }}" data-ix="{{ loop.index }}">
                        <div class="row">
                        {% endif %}
                            <div class="col-12 col-md-4">
                                <a href="{{ vich_uploader_asset(image, 'imageFile')  | imagine_filter('news_gallery_detail') }}" data-fancybox="gallery" data-caption="{{ image.credits }}"><img src="{{ vich_uploader_asset(image, 'imageFile')  | imagine_filter('news_gallery_thumb')}}" alt=""></a>
                            </div>
                      {% endfor %}
                      {% if item.fotos|length > 0 %}
                            </div>
                        </div>
                      {% endif %}
                    </div>  
                    {% if item.fotos|length > 3 %}
                    <div class="nav-wrapper">
                        <button class="carousel-control-prev" type="button" data-bs-target="#gallery-carousel" data-bs-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Previous</span>
                        </button>
                        <span class="counter">1</span>
                        <button class="carousel-control-next" type="button" data-bs-target="#gallery-carousel" data-bs-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                    {% endif %}
                  </div>
            </div>
        </div>   
        <div class="row">
            <div class="co-12 content-wrapper">
                <p>
                    <a href="{{ path('app_news') }}" class="view-more-button btn btn-primary btn-lg"><span class="arr-left"></span>Back to all</a>
                </p>
            </div>
        </div>
    </div>
</section>
<section class="contact">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 content-wrapper dash">
                <h2>Contact us</h2>
                <p>Do you have questions? <br>Write to us.</p>
                <p>
                    <a href="{{ path('app_contact')}}" class="view-more-button btn btn-primary btn-lg">Contact</a>
                </p>

            </div>
        </div>
    </div>
</section>

{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="/bundles/fancybox/fancybox.css"> 
{{ parent() }}


{% endblock stylesheets %}