Compare commits

...

3 Commits

Author SHA1 Message Date
3d5605a415 MODIF backend 2025-07-30 11:26:23 +00:00
63612a3d3d ADD styles & js 2025-07-30 11:26:07 +00:00
cd6bac2844 ADD new pages 2025-07-30 11:25:56 +00:00
11 changed files with 398 additions and 77 deletions

View File

@ -1,61 +1,31 @@
// jQuery( document ).ready( function( $ ) {
// console.log('modal')
// $(document).ready(function () {
// const $videoModal = $('#videoModal');
// const $modalIframe = $('#modalVideoIframe');
// const $modalTitle = $('#videoModalLabel');
// // Cuando se abre el modal
// $videoModal.on('show.bs.modal', function (event) {
// const $button = $(event.relatedTarget);
// const videoUrl = $button.data('video-url');
// const videoTitle = $button.data('video-title');
// const videoAllow = $button.data('video-allow');
// const separator = videoUrl.includes('?') ? '&' : '?';
// const autoplayUrl = videoUrl + separator + 'autoplay=1';
// $modalIframe.attr('src', autoplayUrl);
// $modalIframe.attr('title', videoTitle);
// $modalIframe.attr('allow', videoAllow);
// $modalTitle.text(videoTitle);
// });
// // Cuando se cierra el modal, parar el vídeo
// $videoModal.on('hide.bs.modal', function () {
// $modalIframe.attr('src', '');
// });
// });
// });
console.log('hello')
// Modal vídeos
document.addEventListener('DOMContentLoaded', function() {
const videoModal = document.getElementById('videoModal');
const modalIframe = document.getElementById('modalVideoIframe');
const modalTitle = document.getElementById('videoModalLabel');
// Cuando se abre el modal
videoModal.addEventListener('show.bs.modal', function (event) {
const button = event.relatedTarget;
const videoUrl = button.getAttribute('data-video-url');
const videoTitle = button.getAttribute('data-video-title');
const videoAllow = button.getAttribute('data-video-allow');
// Añadir autoplay al URL si no lo tiene
const separator = videoUrl.includes('?') ? '&' : '?';
const autoplayUrl = videoUrl + separator + 'autoplay=1';
modalIframe.src = autoplayUrl;
modalIframe.title = videoTitle;
modalIframe.allow = videoAllow;
modalTitle.textContent = videoTitle;
});
// Cuando se cierra el modal, parar el vídeo
videoModal.addEventListener('hide.bs.modal', function () {
modalIframe.src = '';
});
});
if ( videoModal || modalIframe || modalTitle ) {
// when modal open...
videoModal.addEventListener('show.bs.modal', function (event) {
const button = event.relatedTarget;
const videoUrl = button.getAttribute('data-video-url');
const videoTitle = button.getAttribute('data-video-title');
const videoAllow = button.getAttribute('data-video-allow');
// Add autoplay to URL
const separator = videoUrl.includes('?') ? '&' : '?';
const autoplayUrl = videoUrl + separator + 'autoplay=1';
modalIframe.src = autoplayUrl;
modalIframe.title = videoTitle;
modalIframe.allow = videoAllow;
modalTitle.textContent = videoTitle;
});
// When modal close, video stops.
videoModal.addEventListener('hide.bs.modal', function () {
modalIframe.src = '';
});
}
}); //end DMContentLoaded

View File

@ -224,7 +224,7 @@ class StarterSite extends Site {
private function recentPostsNews() {
return Timber::get_posts([
'post_type' => 'post',
'posts_per_page' => 3,
'posts_per_page' => -1,
'category_name' => 'noticias',
'post_status' => 'publish'
]);
@ -266,7 +266,7 @@ class StarterSite extends Site {
return $logos;
}
private function getVideosCarousel() {
private function getVideos() {
return Timber::get_posts([
'post_type' => 'videos',
'posts_per_page' => -1, // -1 = sin límite
@ -343,11 +343,62 @@ class StarterSite extends Site {
// Hacer función disponible en Twig
public function add_videos_embed_to_twig ($twig) {
error_log('Añadiendo función generar_embed a Twig'); // Debug
//error_log('Añadiendo función generar_embed a Twig'); // Debug
$twig->addFunction(new \Twig\TwigFunction('generar_embed', [$this, 'generar_embed_universal']));
return $twig;
}
private function getPaginasAcerca() {
return Timber::get_posts([
'post_type' => 'acerca',
'post_status' => 'publish',
'orderby' => 'menu_order',
'order' => 'ASC',
'posts_per_page' => -1,
]);
}
private function getDocumentos() {
$posts = Timber::get_posts([
'post_type' => 'documento',
'post_status' => 'publish',
'orderby' => 'menu_order',
'order' => 'ASC',
'posts_per_page' => -1,
]);
error_log('Número de posts encontrados: ' . count($posts));
$documentos = [];
foreach ($posts as $post) {
$doc = [
'id' => $post->ID,
'title' => $post->title,
'link' => $post->link,
'content' => $post->content,
'excerpt' => $post->excerpt,
];
$archivo = get_field('documento', $post->ID);
if ($archivo && is_array($archivo)) {
$doc['documento_url'] = $archivo['url'] ?? '';
$doc['documento_filename'] = $archivo['filename'] ?? '';
$doc['documento_filesize'] = size_format($archivo['filesize'] ?? 0);
$doc['documento_extension'] = pathinfo($archivo['filename'] ?? '', PATHINFO_EXTENSION);
$doc['thumbnail'] = get_the_post_thumbnail_url($post->ID, 'medium');
}
$documentos[] = $doc;
}
return $documentos;
}
//Global variables
public function add_global_context($context) {
@ -357,10 +408,12 @@ class StarterSite extends Site {
$context['botones_imagen'] = $this->getBotonesImagen();
$context['redes_sociales'] = $this->getIconsRRSS();
$context['logos_header'] = $this->getLogosHeader();
$context['videos_carousel'] = $this->getVideosCarousel();
$context['videos'] = $this->getVideos();
$context['ultimo_articulo_opinion'] = $this->getUltimoArticuloOpinion();
$context['posts_campana'] = $this->getCampanaArticles();
$context['paginas_acerca'] = $this->getPaginasAcerca();
$context['documentos'] = $this->getDocumentos();
return $context;
}

View File

@ -177,4 +177,8 @@
.svg-hover-white:hover {
filter: brightness(0) invert(1);
}
}
.active-acerca {
background-color: #dc2d30;
}

View File

@ -0,0 +1,26 @@
<div class="alert alert-light m-0 mb-2 p-2" role="alert">
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="{{ site.url }}">Inicio</a></li>
{% if post.post_type == 'page' %}
{# Si tiene padres, recorrerlos #}
{% set ancestors = post.ancestors %}
{% for ancestor in ancestors|reverse %}
<li class="breadcrumb-item">
<a href="{{ ancestor.link }}">{{ ancestor.title }}</a>
</li>
{% endfor %}
<li class="breadcrumb-item active" aria-current="page">{{ post.title }}</li>
{% elseif post.post_type == 'post' %}
<li class="breadcrumb-item"><a href="{{ site.url }}/blog">Blog</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ post.title }}</li>
{% elseif post.post_type != 'page' %}
<li class="breadcrumb-item"><a href="{{ post.type_archive_link }}">{{ post.post_type_label }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ post.title }}</li>
{% endif %}
</ol>
</nav>
</div>

View File

@ -6,10 +6,10 @@
<div class="col-lg-8 col-12 mb-4 mb-lg-0">
<p class="mb-4 position-relative fs-4 fw-bold sp-module-title">VÍDEOS</p>
{% if videos_carousel %}
{% if videos %}
<div id="videosCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
{% for pair in videos_carousel|batch(2, null) %}
{% for pair in videos|batch(2, null) %}
<div class="carousel-item {% if loop.first %}active{% endif %}">
<div class="row">
@ -68,7 +68,7 @@
</div>
{# carousel controls buttons#}
{% if videos_carousel|length > 1 %}
{% if videos|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>
@ -79,7 +79,7 @@
</button>
{# <div class="carousel-indicators">
{% for pair in videos_carousel|batch(2, null) %}
{% for pair in videos|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 %}

View File

@ -1,5 +1,9 @@
{% extends 'layouts/base.twig' %}
{% block content %}
Sorry, we couldn't find what you're looking for.
<main class="container py-5 text-center">
<h1 class="display-4">404 - Página no encontrada</h1>
<p class="lead">Ez da aurkitu bilatzen duzun orria / No se ha encontrado la página que buscabas</p>
<a href="<?php echo home_url(); ?>" class="btn btn-primary mt-4">Volver al inicio</a>
</main>
{% endblock %}

View File

@ -1,7 +1,52 @@
{% extends 'layouts/base.twig' %}
{% block content %}
<div class="alert alert-warning" role="alert">
Acerca de la CNT ---- A simple warning alert—check it out!
{% include 'partials/breadcrumb.twig' %}
<div class="container mt-4">
<div class="row">
<!-- Columna izquierda: títulos -->
<div class="col-md-4 border-end">
<ul id="post-list" class="list-group">
{% for pagina in paginas_acerca %}
<li class="list-group-item {% if pagina.id == post.id %}active{% endif %}" data-post-id="{{ pagina.id }}">
<a href="#"
data-post-id="{{ pagina.id }}"
class="text-decoration-none d-block w-100 {% if pagina.id == post.id %}text-white{% endif %}">
{{ pagina.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
<!-- Columna derecha: contenido dinámico del post (se llena con el primer post) -->
<div class="col-md-8" id="post-content">
<!-- Aquí se inyectará dinámicamente el primer post con JS -->
</div>
</div>
<!-- Plantilla oculta con el contenido completo de cada post -->
<div id="post-templates" class="d-none">
{% for pagina in paginas_acerca %}
<div class="post-template" data-post-id="{{ pagina.id }}">
<div class="card mb-3">
<div class="card-header">
<h5 class="card-title">{{ pagina.title }}</h5>
</div>
<div class="card-body" style="padding-bottom: 60px;">
<p class="card-text">
{{ pagina.content }}
</p>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}

View File

@ -1,8 +1,71 @@
{% extends 'layouts/base.twig' %}
{% block content %}
<h1 class="badge text-bg-primary text-wrap">DOCUMENTOS</h1>
<div class="alert alert-warning" role="alert">
DOCUMENTOS ---- A simple warning alert—check it out!
<p class="alert alert-info" role="alert">
<i class="bi bi-folder-fill"></i>
Dokumentuak / Documentos</p>
<section class="documentos">
<div class="container">
{% if documentos %}
{#<pre>{{ dump(documentos) }}</pre>#}
{% for doc in documentos %}
<div class="card mb-3">
<div class="card-header">
<h6 class="card-title mb-1">{{ doc.title }}</h6>
</div>
<div class="row g-0">
<div class="col-2">
{% if doc.thumbnail %}
<img src="{{ doc.thumbnail }}"
class="img-fluid object-fit-cover"
alt="{{ doc.title }}"
loading="lazy"
>
{% else %}
<div class="bg-light d-flex align-items-center justify-content-center h-100 rounded-start">
<i class="bi bi-file-earmark-image-fill"></i>
</div>
{% endif %}
</div>
<div class="col-10">
<div class="card-body d-flex flex-column justify-content-between h-100 py-2">
<div>
{% if doc.content %}
<p class="card-text small mb-2">{{ doc.content }}</p>
{% endif %}
</div>
<div>
{% if doc.documento_url %}
<a href="{{ doc.documento_url }}"
class="btn btn-primary btn-sm me-2"
target="_blank">
<i class="bi bi-eye-fill"></i>
Ver documento
</a>
<a href="{{ doc.documento_url }}" download
class="btn btn-primary btn-sm me-2" >
<i class="bi bi-cloud-download-fill"></i>
Descargar
</a>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="alert alert-info" role="alert">
No hay documentos disponibles.
</div>
{% endif %}
</div>
</section>
{% endblock %}

View File

@ -1,7 +1,41 @@
{% extends 'layouts/base.twig' %}
{% block content %}
<div class="alert alert-warning" role="alert">
NOTICIAS ---- A simple warning alert—check it out!
</div>
{% include 'partials/breadcrumb.twig' %}
{% if recent_posts_noticias %}
{% for noticias in recent_posts_noticias %}
<div class="card my-3 position-relative">
<div class="row g-0">
<div class="col-md-4">
<img src="{{ noticias.thumbnail.src }}"
class="rounded-start object-fit-cover w-100 h-100"
alt="{{ noticias.thumbnail.alt }}"
style="min-height: 200px;"
/>
</div>
<div class="col-md-8">
<div class="card-body" style="padding-bottom: 60px;">
<h5 class="card-title">{{ noticias.title }}</h5>
<p class="card-text"> {{
noticias.excerpt({
words: 50,
read_more: ''
})
}}</p>
<p class="card-text"><small class="text-body-secondary">{{ noticias.date }}</small></p>
<a href="{{ noticias.link }}"
class="btn btn-secondary position-absolute"
style="position: absolute; bottom: 15px; right: 15px; z-index: 10;"
>Sigue leyendo...</a>
</div>
</div>
</div>
</div>
{% endfor %}
{% else %}
<h2>no hay artículos</h2>
{% endif %}
{% endblock %}

View File

@ -1,7 +1,90 @@
{% extends 'layouts/base.twig' %}
{% block content %}
<div class="alert alert-warning" role="alert">
VIDEOS ---- A simple warning alert—check it out!
{% include 'partials/breadcrumb.twig' %}
<div class="container text-center">
<div class="row">
{% if videos %}
{% for video in videos %}
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 mb-2">
<div class="video-item">
{% set url_video = video.meta('url_video') %}
{% set video_data = generar_embed(url_video) %}
{% if video_data %}
{# Thumbnail clickeable en lugar del iframe #}
<div class="ratio ratio-16x9 video-thumbnail-container position-relative rounded"
data-bs-toggle="modal"
data-bs-target="#videoModal"
data-video-url="{{ video_data.embed_url }}"
data-video-title="{{ video.titulo }}"
data-video-allow="{{ video_data.allow }}"
style="cursor: pointer;
background-image: url('{{ video_data.thumbnail_url }}');
background-size: cover;
background-position: center;">
{# Overlay con botón play #}
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
<div class="btn btn-danger btn-lg rounded-circle d-flex align-items-center justify-content-center"
style="width: 60px; height: 60px;">
<i class="bi bi-play-btn" style="font-size: 2rem;"></i>
</div>
</div>
{# Overlay oscuro al hover #}
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-0 hover-overlay"
style="transition: opacity 0.3s ease;">
</div>
{# Título del vídeo #}
<div class="position-absolute bottom-0 start-0 end-0 bg-dark bg-opacity-75 text-white p-3 rounded">
<h6 class="mb-0 text-white">{{ video.titulo }}</h6>
</div>
</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>
{% endfor %}
{% else %}
<p>No hay vídeos disponibles.</p>
{% endif %}
</div>
{# MODAL PARA REPRODUCIR VÍDEO #}
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="videoModalLabel"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
</div>
<div class="modal-body p-0">
<div class="ratio ratio-16x9">
<iframe id="modalVideoIframe"
src=""
title=""
frameborder="0"
allow=""
allowfullscreen
loading="lazy">
</iframe>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@ -0,0 +1,39 @@
{% extends 'layouts/base.twig' %}
{% block content %}
<div class="container mt-4">
<div class="row">
<!-- Columna izquierda: títulos -->
<div class="col-md-4 border-end">
<ul id="post-list" class="list-group">
{% for pagina in paginas_acerca %}
<li class="list-group-item {% if pagina.id == post.id %}active-acerca{% endif %}">
<a href="{{ pagina.link }}"
class="text-decoration-none d-block w-100 text-black {% if pagina.id == post.id %}text-white{% endif %}">
{{ pagina.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
<!-- Columna derecha: contenido del post actual -->
<div class="col-md-8">
<div class="card mb-3">
<div class="card-header">
<h5 class="card-title">{{ post.title }}</h5>
</div>
<div class="card-body" style="padding-bottom: 60px;">
<div class="card-text">
{{ post.content }}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}