Add views sections
This commit is contained in:
@ -7,23 +7,42 @@
|
||||
<body class="{{ body_class }}">
|
||||
{{ function('wp_body_open') }}
|
||||
<a class="skip-link screen-reader-text" href="#content">{{ _e('Skip to content') }}</a>
|
||||
|
||||
<header class="header">
|
||||
{% block header %}
|
||||
<div class="wrapper">
|
||||
<h1 class="hdr-logo">
|
||||
<a class="hdr-logo-link" href="{{ site.url }}">{{ site.name }}</a>
|
||||
</h1>
|
||||
<nav id="nav-main" class="nav-main">
|
||||
{% include 'partials/menu.twig' with {
|
||||
items: menu.get_items
|
||||
} %}
|
||||
</nav>
|
||||
<!-- #nav -->
|
||||
<div class="container-fluid text-bg-light">
|
||||
{% include "partials/top-bar.twig" %}
|
||||
</div>
|
||||
<div class="container my-1">
|
||||
<div class="col-12">
|
||||
{% include "partials/logos-header.twig" %}
|
||||
</div>
|
||||
|
||||
<!-- nav -->
|
||||
<div class="row align-items-center justify-content-around container-fluid bg-body-tertiary">
|
||||
<div class="col-7 col-md-10">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container-fluid">
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
{% include "partials/menu.twig" with {'items': menu.get_items} %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-3 col-md-1 mt-2 mt-sm-0">
|
||||
{% include "partials/btn-search.twig" with {'items': menu.get_items} %}
|
||||
</div>
|
||||
<div class="col-2 col-md-1">
|
||||
{% include "partials/menu-burger.twig" with {'items': menu.get_items} %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- end nav -->
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
</header>
|
||||
|
||||
<section id="content" class="content-wrapper">
|
||||
<section id="content" class="content-wrapper container">
|
||||
{% if title %}
|
||||
<h1>{{ title }}</h1>
|
||||
{% endif %}
|
||||
@ -34,10 +53,14 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- footer -->
|
||||
{% block footer %}
|
||||
{% include 'partials/footer.twig' %}
|
||||
{% endblock %}
|
||||
{{ function('wp_footer') }}
|
||||
{% do action('get_footer') %}
|
||||
<footer id="footer" class="container-fluid text-bg-dark mt-5">
|
||||
{% include 'partials/footer.twig' %}
|
||||
</footer>
|
||||
{{ function('wp_footer') }}
|
||||
{% do action('get_footer') %}
|
||||
{% endblock %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
<div class="container justify-content-center">
|
||||
<button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
|
||||
<i class="bi bi-search"></i>
|
||||
</button>
|
||||
<button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
|
||||
<i class="bi bi-search"></i>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasTopLabel">Búsqueda</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<form class="d-flex mt-3" role="search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasTopLabel">Búsqueda</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<form class="d-flex mt-3" role="search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,26 +1,41 @@
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-3 mb-5">
|
||||
<div class="px-lg-4"><img src="/wp-content/uploads/2025/07/logobehea.png" class="img-fluid" /></div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
{#{% include "menu.twig" with {'items': menu.get_items} %}#}
|
||||
</div>
|
||||
<div class="col-sm-3 mb-5">
|
||||
|
||||
<div class="container">
|
||||
<div class="row py-2">
|
||||
|
||||
<div class="col-sm-3 mb-1">
|
||||
<div class=""><img src="/wp-content/uploads/2025/07/logobehea.png" class="img-fluid" /></div>
|
||||
<div class="p-1">
|
||||
<p>{{ footer_1 }}</p>
|
||||
<p>{{ footer_2 }}</p>
|
||||
</div>
|
||||
<div class="btn-group m-1" role="group" aria-label="First group">
|
||||
{% for red in redes_sociales %}
|
||||
<a href="{{ red.url }}" class="btn btn-outline-white pt-1" target="_blank" rel="noopener noreferrer">
|
||||
{% if red.imagen %}
|
||||
<img src="{{ red.imagen.url }}" alt="{{ red.imagen.alt }}" class="social-icon svg-white">
|
||||
{% else %}
|
||||
<i class="bi bi-globe"></i> {# Icono por defecto si no hay imagen #}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
{#<p>{{ dump() }}</p>
|
||||
{% include "menu.twig" with {'items': menu.get_items} %}#}
|
||||
</div>
|
||||
<div class="col-sm-3 mb-5">
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<h2>Contactos</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<p>Paseo de las Acacias 5,<br>Bilbao</p>
|
||||
<p><a href="tel:+34666666666">(+34) 6666666</a></p>
|
||||
<p>cnt @ cnt.org</p>
|
||||
<div class="py-2 text-center">
|
||||
<p class="mb-0 fs-8">• Todos los derechos reservados • {{"now"|date('Y')}}</p>
|
||||
<a class="nav-link d-inline" href="/politica-de-privacidad">Aviso legal y política de privacidad •</a>
|
||||
<a class="nav-link d-inline" href="/politica-de-cookies">Política de cookies</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="py-2 text-center">
|
||||
<p class="mb-0 fs-8">• Todos los derechos reservados • {{"now"|date('Y')}}</p>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item"><a class="nav-link" href="/politica-de-privacidad">Aviso legal y política de privacidad</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="/politica-de-cookies">Política de cookies</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
31
views/partials/logos-header.twig
Normal file
31
views/partials/logos-header.twig
Normal file
@ -0,0 +1,31 @@
|
||||
{# Sección Logos #}
|
||||
<a class="navbar-brand d-block" href="{{site.url}}" rel="home">
|
||||
{% if logos_header %}
|
||||
<div class="row g-3">
|
||||
{% for logo in logos_header %}
|
||||
{% if loop.first %}
|
||||
{# Primera columna #}
|
||||
<div class="col-lg-5 col-12 mb-3 mb-md-0">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<img src="{{ logo.logo.sizes.medium }}"
|
||||
alt="{{ logo.logo.alt }}"
|
||||
class="img-fluid mb-2 mb-sm-0 mb-md-2 mb-lg-0 me-sm-3 me-md-0 me-lg-3"
|
||||
style="max-height: 100px; flex-shrink: 0;">
|
||||
<h1 class="mb-0 text-center text-sindikatua text-uppercase">{{ logo.texto }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{# Segunda columna #}
|
||||
<div class="col-lg-7 col-12">
|
||||
<div class="d-flex align-items-center justify-content-center justify-content-md-start h-100">
|
||||
<img src="{{ logo.logo.sizes.large }}"
|
||||
alt="{{ logo.logo.alt }}"
|
||||
class="img-fluid"
|
||||
style="max-width: 100%; height: auto;">
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</a>
|
||||
@ -1,6 +1,6 @@
|
||||
{% if menu %}
|
||||
<nav class="navbar justify-content-center">
|
||||
<a class="navbar-brand" href="#"></a>
|
||||
<nav class="navbar justify-content-center menu-burger">
|
||||
{#<a class="navbar-brand" href="#"></a>#}
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
@ -15,17 +15,17 @@
|
||||
{% if (item.children) %}
|
||||
<li class="nav-item dropdown effect-nav">
|
||||
{#<a class="nav-link dropdown-toggle" href="{{ item.link }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">#}
|
||||
<a class="nav-link dropdown-toggle" href="{{ item.link }}" role="button" aria-expanded="false">
|
||||
<a class="nav-link dropdown-toggle text-light" href="{{ item.link }}" role="button" aria-expanded="false">
|
||||
{{item.title}}</a>
|
||||
<ul class="dropdown-menu">
|
||||
{% for subitem in item.children %}
|
||||
<li><a class="dropdown-item" href="{{ subitem.link }}">{{subitem.title}}</a></li>
|
||||
<li><a class="dropdown-item text-dark" href="{{ subitem.link }}">{{subitem.title}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="{{item.classes | join(' ')}} nav-item effect-nav">
|
||||
<a class="nav-link" href="{{ item.link }}">
|
||||
<a class="nav-link text-light" href="{{ item.link }}">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
{% include 'partials/menu.twig' with {items: item.children} %}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{% if menu %}
|
||||
<ul class="navbar-nav container">
|
||||
<ul class="navbar-nav container menu-bar">
|
||||
{% for item in items %}
|
||||
{% if (item.children) %}
|
||||
<li class="nav-item dropdown effect-nav">
|
||||
|
||||
101
views/partials/section-videos copy.twig
Normal file
101
views/partials/section-videos copy.twig
Normal file
@ -0,0 +1,101 @@
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
|
||||
{# Primera columna - Carousel con vídeos embebidos SIN extraer ID #}
|
||||
<div class="col-lg-8 col-12 mb-4 mb-lg-0">
|
||||
<h2 class="mb-4">Últimos Vídeos</h2>
|
||||
|
||||
|
||||
{% if videos_carousel %}
|
||||
<div id="videosCarousel" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
{% for video in videos_carousel %}
|
||||
<div class="carousel-item {% if loop.first %}active{% endif %}">
|
||||
<div class="video-container">
|
||||
{% set url_video = video.meta('url_video') %}
|
||||
{% set video_data = generar_embed(url_video) %}
|
||||
|
||||
{% if video_data %}
|
||||
{# Vídeo embebido de YouTube #}
|
||||
<div class="ratio ratio-16x9">
|
||||
<iframe src="{{ video_data.embed_url }}"
|
||||
title="{{ video.titulo }}"
|
||||
frameborder="0"
|
||||
allow="{{ video_data.allow }}"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
{# Título del vídeo debajo #}
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 class="mb-0">{{ video.titulo }}</h5>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
{# Fallback si no hay URL #}
|
||||
<div class="alert alert-warning text-center">
|
||||
<h5>{{ video.titulo }}</h5>
|
||||
<p class="mb-0">No se ha configurado URL para este vídeo.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{# Controles del carousel (solo si hay más de un vídeo) #}
|
||||
{% if videos_carousel|length > 1 %}
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#videosCarousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Anterior</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#videosCarousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Siguiente</span>
|
||||
</button>
|
||||
|
||||
{# Indicadores #}
|
||||
<div class="carousel-indicators">
|
||||
{% for video in videos_carousel %}
|
||||
<button type="button" data-bs-target="#videosCarousel" data-bs-slide-to="{{ loop.index0 }}"
|
||||
{% if loop.first %}class="active"{% endif %} aria-label="Slide {{ loop.index }}"></button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-info">
|
||||
<p class="mb-0">No hay vídeos disponibles.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Segunda columna - Último artículo de opinión #}
|
||||
<div class="col-lg-4 col-12 opinion-article">
|
||||
<h2 class="mb-4">Última Opinión</h2>
|
||||
|
||||
{% if ultimo_articulo_opinion %}
|
||||
<div class="h-100">
|
||||
{% for article in ultimo_articulo_opinion %}
|
||||
<div class="card secondary-article">
|
||||
<a href="{{ article.link }}">
|
||||
<img src="{{ article.thumbnail.src('medium') }}"
|
||||
alt="{{ article.thumbnail.alt }}"
|
||||
class="card-img "/>
|
||||
<div class="card-img-overlay">
|
||||
<h3 class="card-title text-wrap">
|
||||
<a href="{{ article.link }}">{{ article.title }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-muted">No hay artículos de opinión disponibles.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
97
views/partials/section-videos.twig
Normal file
97
views/partials/section-videos.twig
Normal file
@ -0,0 +1,97 @@
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
|
||||
{# Primera columna - Carousel con vídeos embebidos #}
|
||||
<div class="col-lg-8 col-12 mb-4 mb-lg-0">
|
||||
<h2 class="mb-4">Últimos Vídeos</h2>
|
||||
|
||||
{% if videos_carousel %}
|
||||
<div id="videosCarousel" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
{% for pair in videos_carousel|batch(2, null) %}
|
||||
<div class="carousel-item {% if loop.first %}active{% endif %}">
|
||||
<div class="row">
|
||||
{% for video in pair %}
|
||||
{% if video %}
|
||||
<div class="col-6">
|
||||
<div class="video-item">
|
||||
{% set url_video = video.meta('url_video') %}
|
||||
{% set video_data = generar_embed(url_video) %}
|
||||
|
||||
{% if video_data %}
|
||||
<div class="ratio ratio-1x1">
|
||||
<iframe src="{{ video_data.embed_url }}"
|
||||
title="{{ video.titulo }}"
|
||||
frameborder="0"
|
||||
allow="{{ video_data.allow }}"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-warning">
|
||||
<h5>{{ video.titulo }}</h5>
|
||||
<p class="mb-0">No se ha configurado URL para este vídeo.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if videos_carousel|length > 1 %}
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#videosCarousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Anterior</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#videosCarousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Siguiente</span>
|
||||
</button>
|
||||
|
||||
<div class="carousel-indicators">
|
||||
{% for pair in videos_carousel|batch(2, null) %}
|
||||
<button type="button" data-bs-target="#videosCarousel" data-bs-slide-to="{{ loop.index0 }}"
|
||||
{% if loop.first %}class="active"{% endif %} aria-label="Slide {{ loop.index }}"></button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p>No hay vídeos disponibles.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Segunda columna - Último artículo de opinión #}
|
||||
<div class="col-lg-4 col-12 opinion-article">
|
||||
<h2 class="mb-4">Última Opinión</h2>
|
||||
|
||||
{% if ultimo_articulo_opinion %}
|
||||
<div class="h-100">
|
||||
{% for article in ultimo_articulo_opinion %}
|
||||
<div class="card secondary-article">
|
||||
<a href="{{ article.link }}">
|
||||
<img src="{{ article.thumbnail.src('medium') }}"
|
||||
alt="{{ article.thumbnail.alt }}"
|
||||
class="card-img"/>
|
||||
<div class="card-img-overlay">
|
||||
<h3 class="card-title text-wrap">
|
||||
<a href="{{ article.link }}">{{ article.title }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-muted">No hay artículos de opinión disponibles.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,25 +1,34 @@
|
||||
<div class="container-fluid">
|
||||
<div class="container">
|
||||
<div class="row align-items-center py-1">
|
||||
<!-- Izquierda: Botones -->
|
||||
<div class="col">
|
||||
<div class="btn-bar d-flex align-items-center">
|
||||
<button class="btn btn-outline-light btn-sm me-2">
|
||||
<button class="btn btn-outline-dark btn-sm me-2">
|
||||
<span class="d-inline d-sm-none">EUS</span>
|
||||
<span class="d-none d-sm-inline">EUSKERA</span>
|
||||
</button>
|
||||
<button class="btn btn-outline-light btn-sm">
|
||||
<button class="btn btn-outline-dark btn-sm">
|
||||
<span class="d-inline d-sm-none">CAS</span>
|
||||
<span class="d-none d-sm-inline">CASTELLANO</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Derecha: Redes sociales -->
|
||||
|
||||
<!-- Right side: RRSS -->
|
||||
<div class="col d-flex justify-content-end">
|
||||
<div class="btn-group m-1" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-facebook"></i></button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-twitter-x"></i></button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-youtube"></i></button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-instagram"></i></button>
|
||||
{% for red in redes_sociales %}
|
||||
<a href="{{ red.url }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">
|
||||
{% if red.imagen %}
|
||||
<img src="{{ red.imagen.url }}" alt="{{ red.imagen.alt }}" class="social-icon pt-1 svg-hover-white">
|
||||
{% else %}
|
||||
<i class="bi bi-globe"></i> {# Icono por defecto si no hay imagen #}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user