Compare commits
4 Commits
4adf02215d
...
7027644e7a
| Author | SHA1 | Date | |
|---|---|---|---|
| 7027644e7a | |||
| a04e44604c | |||
| b932f912ff | |||
| 88fa6330be |
4
page.php
4
page.php
@ -17,4 +17,6 @@ $context = Timber::context();
|
|||||||
|
|
||||||
$timber_post = Timber::get_post();
|
$timber_post = Timber::get_post();
|
||||||
$context['post'] = $timber_post;
|
$context['post'] = $timber_post;
|
||||||
Timber::render( array( 'templates/page-' . $timber_post->post_name . '.twig', 'page.twig' ), $context );
|
//Timber::render( array( 'templates/page-' . $timber_post->post_name . '.twig', 'page.twig' ), $context );
|
||||||
|
|
||||||
|
Timber::render( array( 'templates/page-' . $timber_post->post_name . '.twig' ), $context );
|
||||||
@ -29,6 +29,12 @@ class StarterSite extends Site {
|
|||||||
add_filter( 'timber/twig/functions', [ $this, 'add_functions_to_twig' ] );
|
add_filter( 'timber/twig/functions', [ $this, 'add_functions_to_twig' ] );
|
||||||
add_filter( 'timber/twig/environment/options', [ $this, 'update_twig_environment_options' ] );
|
add_filter( 'timber/twig/environment/options', [ $this, 'update_twig_environment_options' ] );
|
||||||
|
|
||||||
|
add_filter('upload_mimes', [$this, 'add_svg_support']); //add svg files
|
||||||
|
add_filter('timber/context', [$this, 'add_global_context']); // variables globales
|
||||||
|
//add_filter('timber/twig', [$this, 'add_youtube_function_to_twig']);
|
||||||
|
add_filter('timber/twig', [$this, 'add_videos_embed_to_twig']);
|
||||||
|
|
||||||
|
|
||||||
parent::__construct();
|
parent::__construct();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -185,4 +191,174 @@ class StarterSite extends Site {
|
|||||||
|
|
||||||
return $options;
|
return $options;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//add svg files
|
||||||
|
public function add_svg_support($file_types) {
|
||||||
|
$new_filetypes = array();
|
||||||
|
$new_filetypes['svg'] = 'image/svg+xml';
|
||||||
|
$file_types = array_merge($file_types, $new_filetypes);
|
||||||
|
return $file_types;
|
||||||
|
}
|
||||||
|
|
||||||
|
//section "portada"
|
||||||
|
private function getBotonesImagen() {
|
||||||
|
$botones = [];
|
||||||
|
|
||||||
|
for ($i = 1; $i <= 4; $i++) {
|
||||||
|
$imagen = get_field('imagen_boton_' . $i);
|
||||||
|
$enlace = get_field('enlace_boton_' . $i);
|
||||||
|
|
||||||
|
$botones[] = [
|
||||||
|
'imagen' => $imagen,
|
||||||
|
'enlace' => $enlace,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return $botones;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Get last 3 articles with category "noticias"
|
||||||
|
private function recentPostsNews() {
|
||||||
|
return Timber::get_posts([
|
||||||
|
'post_type' => 'post',
|
||||||
|
'posts_per_page' => 3,
|
||||||
|
'category_name' => 'noticias',
|
||||||
|
'post_status' => 'publish'
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
private function getIconsRRSS() {
|
||||||
|
$icons_rrss = [];
|
||||||
|
for ($i = 1; $i <= 4; $i++) {
|
||||||
|
$img = get_field('rrss_img_' . $i, 'option');
|
||||||
|
$url = get_field('rrss_url_' . $i, 'option');
|
||||||
|
|
||||||
|
if ($img || $url) {
|
||||||
|
$icons_rrss[] = [
|
||||||
|
'imagen' => $img,
|
||||||
|
'url' => $url
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return $icons_rrss;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function getLogosHeader ($max_logos = 2) {
|
||||||
|
$logos = [];
|
||||||
|
|
||||||
|
for ($i = 1; $i <= $max_logos; $i++) {
|
||||||
|
$logoHeader = get_field('logo_header_' . $i, 'option');
|
||||||
|
$textoHeader = get_field('texto_header_' . $i, 'option');
|
||||||
|
|
||||||
|
if ($logoHeader || $textoHeader) {
|
||||||
|
$logos[] = [
|
||||||
|
'logo' => $logoHeader,
|
||||||
|
'texto' => $textoHeader
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return $logos;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
private function getVideosCarousel($cantidad = 2) {
|
||||||
|
return Timber::get_posts([
|
||||||
|
'post_type' => 'videos',
|
||||||
|
'posts_per_page' => $cantidad,
|
||||||
|
'post_status' => 'publish',
|
||||||
|
'orderby' => 'date',
|
||||||
|
'order' => 'DESC'
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
private function getUltimoArticuloOpinion() {
|
||||||
|
return Timber::get_posts([
|
||||||
|
'post_type' => 'opinion',
|
||||||
|
'posts_per_page' => 1,
|
||||||
|
'post_status' => 'publish',
|
||||||
|
'orderby' => 'date',
|
||||||
|
'order' => 'DESC'
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Añadir en functions.php si no la tienes ya
|
||||||
|
// private function obtener_youtube_id($url) {
|
||||||
|
// $pattern = '/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/';
|
||||||
|
// preg_match($pattern, $url, $matches);
|
||||||
|
// return isset($matches[1]) ? $matches[1] : false;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// public function add_youtube_function_to_twig($twig) {
|
||||||
|
// $twig->addFunction(new \Twig\TwigFunction('youtube_id', [$this, 'obtener_youtube_id']));
|
||||||
|
// return $twig;
|
||||||
|
// }
|
||||||
|
|
||||||
|
public function generar_embed_universal($url) {
|
||||||
|
if (empty($url)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// YouTube
|
||||||
|
if (strpos($url, 'youtube.com') !== false || strpos($url, 'youtu.be') !== false) {
|
||||||
|
//error_log('es un vídeo de youtube'); // Debug
|
||||||
|
preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/', $url, $matches);
|
||||||
|
|
||||||
|
if (!empty($matches[1])) {
|
||||||
|
$embed_data = [
|
||||||
|
'platform' => 'youtube',
|
||||||
|
'embed_url' => 'https://www.youtube.com/embed/' . $matches[1] . '?rel=0&modestbranding=1',
|
||||||
|
'allow' => 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
|
||||||
|
];
|
||||||
|
|
||||||
|
//error_log('Embed URL generada: ' . $embed_data['embed_url']);
|
||||||
|
return $embed_data;
|
||||||
|
} else {
|
||||||
|
error_log('No se pudo extraer ID de YouTube');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vimeo
|
||||||
|
if (strpos($url, 'vimeo.com') !== false) {
|
||||||
|
preg_match('/vimeo\.com\/(\d+)/', $url, $matches);
|
||||||
|
if (!empty($matches[1])) {
|
||||||
|
return [
|
||||||
|
'platform' => 'vimeo',
|
||||||
|
'embed_url' => 'https://player.vimeo.com/video/' . $matches[1] . '?title=0&byline=0&portrait=0',
|
||||||
|
'allow' => 'autoplay; fullscreen; picture-in-picture'
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Si no se reconoce la plataforma
|
||||||
|
return [
|
||||||
|
'platform' => 'generic',
|
||||||
|
'embed_url' => $url,
|
||||||
|
'allow' => 'fullscreen'
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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
|
||||||
|
$twig->addFunction(new \Twig\TwigFunction('generar_embed', [$this, 'generar_embed_universal']));
|
||||||
|
return $twig;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Global variables
|
||||||
|
public function add_global_context($context) {
|
||||||
|
|
||||||
|
$context['footer_1'] = get_field('footer_text_1', 'option');
|
||||||
|
$context['footer_2'] = get_field('footer_text_2', 'option');
|
||||||
|
$context['recent_posts_noticias'] = $this->recentPostsNews();
|
||||||
|
$context['botones_imagen'] = $this->getBotonesImagen();
|
||||||
|
$context['redes_sociales'] = $this->getIconsRRSS();
|
||||||
|
$context['logos_header'] = $this->getLogosHeader();
|
||||||
|
$context['videos_carousel'] = $this->getVideosCarousel();
|
||||||
|
$context['ultimo_articulo_opinion'] = $this->getUltimoArticuloOpinion();
|
||||||
|
|
||||||
|
return $context;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
112
style.css
112
style.css
@ -1,23 +1,35 @@
|
|||||||
/*
|
/*
|
||||||
* Theme Name: CNT Sindiaktua
|
* Theme Name: CNT Sindiaktua
|
||||||
* Description: Tema Timber de nexos
|
* Description: Tema Timber de nexos
|
||||||
* Author: Timber Team and You!
|
* Author: nexos estudios
|
||||||
*/
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Yaro';
|
||||||
|
src: url('assets/fonts/yaro-font-family/YaroSt-Black.ttf') format('truetype');
|
||||||
|
font-weight: 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
/* .effect-nav > .nav-link:hover {
|
|
||||||
border-top: 4px solid rgb(255, 0, 0);
|
|
||||||
border-bottom: 4px solid rgb(0, 0, 0);
|
|
||||||
padding: 6px 0;
|
|
||||||
} */
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.dropdown:hover .dropdown-menu {
|
.menu-bar .dropdown:hover .dropdown-menu {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Optional: Add transition effects */
|
/* menu-burger */
|
||||||
|
.menu-burger .offcanvas {
|
||||||
|
background: linear-gradient(135deg,rgba(204,29,26,0.9),#cc1d1a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-burger .dropdown:hover .dropdown-menu {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* transition effects both menus*/
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -28,4 +40,88 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* CSS cards 'noticias' */
|
||||||
|
.recent-posts .card-img-overlay,
|
||||||
|
.opinion-article .card-img-overlay {
|
||||||
|
top: auto !important; /* Anula el top: 0 por defecto de Bootstrap */
|
||||||
|
bottom: 0;
|
||||||
|
height: 25%;
|
||||||
|
background: rgba(128, 128, 128, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts .card-title,
|
||||||
|
.opinion-article .card-title {
|
||||||
|
color: white;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2; /* Número de líneas */
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts .card-title a,
|
||||||
|
.opinion-article .card-title a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts .card-title a:hover {
|
||||||
|
color: #E30B16;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.secondary-article {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts .card.secondary-article .card-title {
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.card-img-overlay {
|
||||||
|
height: 18%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Convert SVG RRSS white */
|
||||||
|
.svg-white {
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-white:hover {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-white {
|
||||||
|
color: white;
|
||||||
|
border-color: white;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-white:hover {
|
||||||
|
background-color: white;
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-hover-white:hover {
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* texto header sindikatua */
|
||||||
|
.text-sindikatua {
|
||||||
|
font-family: 'Yaro', Arial, sans-serif;
|
||||||
|
|
||||||
|
}
|
||||||
|
|||||||
@ -7,23 +7,42 @@
|
|||||||
<body class="{{ body_class }}">
|
<body class="{{ body_class }}">
|
||||||
{{ function('wp_body_open') }}
|
{{ function('wp_body_open') }}
|
||||||
<a class="skip-link screen-reader-text" href="#content">{{ _e('Skip to content') }}</a>
|
<a class="skip-link screen-reader-text" href="#content">{{ _e('Skip to content') }}</a>
|
||||||
|
|
||||||
<header class="header">
|
<header class="header">
|
||||||
{% block header %}
|
{% block header %}
|
||||||
<div class="wrapper">
|
<div class="container-fluid text-bg-light">
|
||||||
<h1 class="hdr-logo">
|
{% include "partials/top-bar.twig" %}
|
||||||
<a class="hdr-logo-link" href="{{ site.url }}">{{ site.name }}</a>
|
</div>
|
||||||
</h1>
|
<div class="container my-1">
|
||||||
<nav id="nav-main" class="nav-main">
|
<div class="col-12">
|
||||||
{% include 'partials/menu.twig' with {
|
{% include "partials/logos-header.twig" %}
|
||||||
items: menu.get_items
|
</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>
|
</nav>
|
||||||
<!-- #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>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section id="content" class="content-wrapper">
|
<section id="content" class="content-wrapper container">
|
||||||
{% if title %}
|
{% if title %}
|
||||||
<h1>{{ title }}</h1>
|
<h1>{{ title }}</h1>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@ -34,10 +53,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- footer -->
|
||||||
{% block footer %}
|
{% block footer %}
|
||||||
|
<footer id="footer" class="container-fluid text-bg-dark mt-5">
|
||||||
{% include 'partials/footer.twig' %}
|
{% include 'partials/footer.twig' %}
|
||||||
{% endblock %}
|
</footer>
|
||||||
{{ function('wp_footer') }}
|
{{ function('wp_footer') }}
|
||||||
{% do action('get_footer') %}
|
{% do action('get_footer') %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
<div class="container justify-content-center">
|
|
||||||
<button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
|
<button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
|
||||||
<i class="bi bi-search"></i>
|
<i class="bi bi-search"></i>
|
||||||
</button>
|
</button>
|
||||||
@ -15,5 +14,3 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|||||||
@ -1,26 +1,41 @@
|
|||||||
<div class="row">
|
<div class="container">
|
||||||
|
<div class="row py-2">
|
||||||
|
|
||||||
<div class="col-sm-3 mb-5">
|
<div class="col-sm-3 mb-1">
|
||||||
<div class="px-lg-4"><img src="/wp-content/uploads/2025/07/logobehea.png" class="img-fluid" /></div>
|
<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>
|
||||||
<div class="col-sm-3">
|
<div class="col-sm-3">
|
||||||
{#{% include "menu.twig" with {'items': menu.get_items} %}#}
|
{#<p>{{ dump() }}</p>
|
||||||
|
{% include "menu.twig" with {'items': menu.get_items} %}#}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-3 mb-5">
|
<div class="col-sm-3 mb-5">
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-3">
|
<div class="col-sm-3">
|
||||||
<p>Paseo de las Acacias 5,<br>Bilbao</p>
|
<h2>Contactos</h2>
|
||||||
<p><a href="tel:+34666666666">(+34) 6666666</a></p>
|
|
||||||
<p>cnt @ cnt.org</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="py-2 text-center">
|
<div class="py-2 text-center">
|
||||||
<p class="mb-0 fs-8">• Todos los derechos reservados • {{"now"|date('Y')}}</p>
|
<p class="mb-0 fs-8">• Todos los derechos reservados • {{"now"|date('Y')}}</p>
|
||||||
<ul class="navbar-nav">
|
<a class="nav-link d-inline" href="/politica-de-privacidad">Aviso legal y política de privacidad •</a>
|
||||||
<li class="nav-item"><a class="nav-link" href="/politica-de-privacidad">Aviso legal y política de privacidad</a></li>
|
<a class="nav-link d-inline" href="/politica-de-cookies">Política de cookies</a>
|
||||||
<li class="nav-item"><a class="nav-link" href="/politica-de-cookies">Política de cookies</a></li>
|
</div>
|
||||||
</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 %}
|
{% if menu %}
|
||||||
<nav class="navbar justify-content-center">
|
<nav class="navbar justify-content-center menu-burger">
|
||||||
<a class="navbar-brand" href="#"></a>
|
{#<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">
|
<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>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
@ -15,17 +15,17 @@
|
|||||||
{% if (item.children) %}
|
{% if (item.children) %}
|
||||||
<li class="nav-item dropdown effect-nav">
|
<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" 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>
|
{{item.title}}</a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
{% for subitem in item.children %}
|
{% 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 %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
{% else %}
|
{% else %}
|
||||||
<li class="{{item.classes | join(' ')}} nav-item effect-nav">
|
<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 }}
|
{{ item.title }}
|
||||||
</a>
|
</a>
|
||||||
{% include 'partials/menu.twig' with {items: item.children} %}
|
{% include 'partials/menu.twig' with {items: item.children} %}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
{% if menu %}
|
{% if menu %}
|
||||||
<ul class="navbar-nav container">
|
<ul class="navbar-nav container menu-bar">
|
||||||
{% for item in items %}
|
{% for item in items %}
|
||||||
{% if (item.children) %}
|
{% if (item.children) %}
|
||||||
<li class="nav-item dropdown effect-nav">
|
<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">
|
<div class="row align-items-center py-1">
|
||||||
<!-- Izquierda: Botones -->
|
<!-- Izquierda: Botones -->
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="btn-bar d-flex align-items-center">
|
<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>
|
<span class="d-none d-sm-inline">EUSKERA</span>
|
||||||
</button>
|
</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>
|
<span class="d-none d-sm-inline">CASTELLANO</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Derecha: Redes sociales -->
|
<!-- Right side: RRSS -->
|
||||||
<div class="col d-flex justify-content-end">
|
<div class="col d-flex justify-content-end">
|
||||||
<div class="btn-group m-1" role="group" aria-label="First group">
|
<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>
|
{% for red in redes_sociales %}
|
||||||
<button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-twitter-x"></i></button>
|
<a href="{{ red.url }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">
|
||||||
<button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-youtube"></i></button>
|
{% if red.imagen %}
|
||||||
<button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-instagram"></i></button>
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
7
views/templates/page-enlaces.twig
Normal file
7
views/templates/page-enlaces.twig
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{% extends 'layouts/base.twig' %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<div class="alert alert-warning" role="alert">
|
||||||
|
Enlaces ---- A simple warning alert—check it out!
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
7
views/templates/page-noticias.twig
Normal file
7
views/templates/page-noticias.twig
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{% extends 'layouts/base.twig' %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<div class="alert alert-warning" role="alert">
|
||||||
|
NOTICIAS ---- A simple warning alert—check it out!
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
74
views/templates/page-portada.twig
Normal file
74
views/templates/page-portada.twig
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
{% extends 'layouts/base.twig' %}
|
||||||
|
{% block content %}
|
||||||
|
|
||||||
|
{# Sección noticias #}
|
||||||
|
{% if recent_posts_noticias %}
|
||||||
|
<section class="recent-posts">
|
||||||
|
<div class="row g-4 mt-3">
|
||||||
|
{# Columna izquierda - Artículo principal #}
|
||||||
|
<div class="col-md-8">
|
||||||
|
{% set main_article = recent_posts_noticias[0] %}
|
||||||
|
<div class="card main-article">
|
||||||
|
<a href="{{ main_article.link }}">
|
||||||
|
<img src="{{ main_article.thumbnail.src('medium') }}"
|
||||||
|
alt="{{ main_article.thumbnail.alt }}"
|
||||||
|
class="card-img " />
|
||||||
|
<div class="card-img-overlay">
|
||||||
|
<h3 class="card-title text-wrap">
|
||||||
|
<a href="{{ main_article.link }}">{{ main_article.title }}</a>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Columna derecha - Dos artículos secundarios #}
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="d-flex flex-column h-100 justify-content-between">
|
||||||
|
{% for article in recent_posts_noticias[1:3] %}
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% else %}
|
||||||
|
<h2>no hay artículos</h2>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{# Sección Logos #}
|
||||||
|
{% if botones_imagen %}
|
||||||
|
<section class="custom-buttons-section my-5">
|
||||||
|
<div class="row g-3">
|
||||||
|
{% for boton in botones_imagen %}
|
||||||
|
<div class="col-md-3 col-sm-6">
|
||||||
|
<a href="{{ boton.enlace }}" class="btn-image-only d-block" target="_blank" rel="noopener noreferrer">
|
||||||
|
<img src="{{ boton.imagen.sizes.medium }}"
|
||||||
|
alt="{{ boton.imagen.alt }}"
|
||||||
|
class="img-fluid rounded">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{# Sección vídeos #}
|
||||||
|
{% include 'partials/section-videos.twig' %}
|
||||||
|
|
||||||
|
{# Sección Campañas / conlfictos #}
|
||||||
|
<h2> Sección Campañas / conflictos</h2>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
7
views/templates/page-videos.twig
Normal file
7
views/templates/page-videos.twig
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{% extends 'layouts/base.twig' %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<div class="alert alert-warning" role="alert">
|
||||||
|
VIDEOS ---- A simple warning alert—check it out!
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user