Nexos/cnt-sindikatua
3
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Compare commits

base: Nexos:d800c2cbc2d8e82719d03e0c9949a5fc081d9f96
Branches Tags
Nexos:main
...
compare: Nexos:03e45ed783d639d297ecd79c67ae95c0048bf3fc
Branches Tags
Nexos:main

3 Commits
d800c2cbc2 ... 03e45ed783

Author SHA1 Message Date
gustavo
03e45ed783 MODIFY Styles 2025-08-13 08:59:42 +00:00
gustavo
23e613546a MODIFY single pages 2025-08-13 08:59:26 +00:00
gustavo
223bca3767 MODIFY searcher 2025-08-13 08:58:35 +00:00
18 changed files with 541 additions and 317 deletions
Expand all files Collapse all files

4
page.php
View File

@ -16,6 +16,7 @@ Timber::render( 'templates/page.twig', $context );*/
$context = Timber::context(); $context = Timber::context();
$timber_post = Timber::get_post(); $timber_post = Timber::get_post();
$context['post'] = $timber_post; $context['post'] = $timber_post;
$context['search_query'] = get_search_query();
//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 );
@ -24,6 +25,9 @@ $parent = get_post($timber_post->post_parent);
if ($parent && $parent->post_name === 'contactos') { if ($parent && $parent->post_name === 'contactos') {
// Para subpáginas de contactos, usar page-contactos.twig // Para subpáginas de contactos, usar page-contactos.twig
Timber::render('templates/page-contactos.twig', $context); Timber::render('templates/page-contactos.twig', $context);
} elseif ($parent && $parent->post_name === 'servicios-privados' || $parent && $parent->post_name === 'servicios-publicos') {
// Para subpáginas de servicios privados, usar page-servicio-individual.twig
Timber::render('templates/single-servicios.twig', $context);
} else { } else {
// Para el resto, usar la lógica original // Para el resto, usar la lógica original
Timber::render(array('templates/page-' . $timber_post->post_name . '.twig'), $context); Timber::render(array('templates/page-' . $timber_post->post_name . '.twig'), $context);

6
search.php
View File

@ -9,10 +9,6 @@ use Timber\Timber;
$templates = [ 'templates/search.twig', 'templates/archive.twig', 'templates/index.twig' ]; $templates = [ 'templates/search.twig', 'templates/archive.twig', 'templates/index.twig' ];
$context = Timber::context( $context = Timber::context([]);
[
'title' => 'Search results for ' . get_search_query(),
]
);
Timber::render( $templates, $context ); Timber::render( $templates, $context );

19
src/StarterSite.php
View File

@ -32,6 +32,7 @@ class StarterSite extends Site {
add_filter('upload_mimes', [$this, 'add_svg_support']); //add svg files add_filter('upload_mimes', [$this, 'add_svg_support']); //add svg files
add_filter('timber/context', [$this, 'add_global_context']); // variables globales add_filter('timber/context', [$this, 'add_global_context']); // variables globales
add_filter('timber/twig', [$this, 'add_videos_embed_to_twig']); //videos embed add_filter('timber/twig', [$this, 'add_videos_embed_to_twig']); //videos embed
add_action('pre_get_posts', array($this, 'exclude_pages_from_search')); //exclude pages with ACF
parent::__construct(); parent::__construct();
} }
@ -554,6 +555,24 @@ class StarterSite extends Site {
return $afiliateFields; return $afiliateFields;
} }
public function exclude_pages_from_search($query) {
if (!is_admin() && $query->is_main_query() && $query->is_search()) {
$query->set('meta_query', array(
'relation' => 'OR',
array(
'key' => 'exclude_from_search',
'compare' => 'NOT EXISTS'
),
array(
'key' => 'exclude_from_search',
'value' => '1',
'compare' => '!='
)
));
}
}
//Global variables //Global variables
public function add_global_context($context) { public function add_global_context($context) {

212
style.css
View File

@ -9,6 +9,8 @@
--rojo-cnt-dark: #9d1b1d; --rojo-cnt-dark: #9d1b1d;
--rojo-cnt-light: #d6453f; --rojo-cnt-light: #d6453f;
--reset: #7b7b7b; --reset: #7b7b7b;
--white:#fff;
--black:#000000ff;
} }
@font-face { @font-face {
@ -19,12 +21,17 @@
font-display: swap; font-display: swap;
} }
/* PORTADA -> ENLACES */
.margin-50 {
margin: 50px 0 !important;
}
/* Botón primario */ /* Botón primario */
.btn-primary-cnt { .btn-primary-cnt {
border-radius: 75px !important; border-radius: 75px !important;
background-color: var(--rojo-cnt); background-color: var(--rojo-cnt);
border: 2px solid var(--rojo-cnt); border: 2px solid var(--rojo-cnt);
color: white; color: var(--white);
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
@ -35,10 +42,11 @@
/* Botón primario - hover */ /* Botón primario - hover */
.btn-primary-cnt:hover { .btn-primary-cnt:hover {
background-color: var(--rojo-cnt-dark); color: var(--black);
border-color: var(--rojo-cnt-dark); background-color: white;
border-color: var(--black);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(255, 0, 0, 0.25); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
} }
/* Botón primario - active */ /* Botón primario - active */
@ -56,7 +64,7 @@ button[type="reset"] {
border-radius: 10px !important; border-radius: 10px !important;
background-color: var(--rojo-cnt-light); background-color: var(--rojo-cnt-light);
border: 2px solid var(--rojo-cnt-light); border: 2px solid var(--rojo-cnt-light);
color: white; color: var(--white);
padding: 10px; padding: 10px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
@ -67,10 +75,11 @@ button[type="reset"] {
/* Botón secundario - hover */ /* Botón secundario - hover */
.btn-secondary-cnt:hover { .btn-secondary-cnt:hover {
background-color: var(--rojo-cnt-light); color: var(--black);
border-color: var(--rojo-cnt-light); background-color: var(--white);
border-color: var(--black);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(255, 0, 0, 0.25); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
} }
/* Botón secundario - active */ /* Botón secundario - active */
@ -89,10 +98,31 @@ button[type="reset"] {
outline: none !important; outline: none !important;
box-shadow: none !important; box-shadow: none !important;
background-color: var(--rojo-cnt) !important; background-color: var(--rojo-cnt) !important;
color: white !important; color: var(--white) !important;
opacity: 0.5; opacity: 0.5;
} }
/* PORTADA -> Titles */
.sp-module-title::after{
background: var(--rojo-cnt);
content: "";
height: 1px;
left: 0;
position: absolute;
bottom: -12px;
width: 150px;
}
.sp-module-title::before{
background: var(--rojo-cnt);
content: "";
height: 1px;
left: 0;
position: absolute;
bottom: -15px;
width: 150px;
}
/* HEADER sindikatua */ /* HEADER sindikatua */
.text-sindikatua { .text-sindikatua {
font-family: 'Yaro', Arial, sans-serif; font-family: 'Yaro', Arial, sans-serif;
@ -127,7 +157,7 @@ button[type="reset"] {
} }
/* PORTADA -> CARDS recent posts 'noticias' */ /* PORTADA -> CARDS recent posts 'noticias' */
.recent-posts .card-img-overlay { .page-portada .recent-posts .card-img-overlay {
top: auto !important; /* Anula el top: 0 por defecto de Bootstrap */ top: auto !important; /* Anula el top: 0 por defecto de Bootstrap */
bottom: 0; bottom: 0;
height: 25%; height: 25%;
@ -137,7 +167,7 @@ button[type="reset"] {
} }
/* PORTADA -> CARDS OPINION */ /* PORTADA -> CARDS OPINION */
.opinion-article .card-img-overlay { .page-portada .opinion-article .card-img-overlay {
top: auto !important; /* Anula el top: 0 por defecto de Bootstrap */ top: auto !important; /* Anula el top: 0 por defecto de Bootstrap */
bottom: 0; bottom: 0;
height: 30%; height: 30%;
@ -146,21 +176,26 @@ button[type="reset"] {
align-items: center; align-items: center;
} }
.page-portada .opinion-article .card-img-overlay:hover,
.page-portada .recent-posts .card-img-overlay:hover {
background: rgba(0, 0, 0, 0.8);
}
@media (991px <= width < 1400px) { @media (991px <= width < 1400px) {
.opinion-article .card-img-overlay { .page-portada .opinion-article .card-img-overlay {
height: 40%; height: 40%;
} }
} }
@media (width < 990px) { @media (width < 990px) {
.opinion-article .card-img-overlay { .page-portada .opinion-article .card-img-overlay {
height: 20%; height: 20%;
} }
} }
.recent-posts .card-title, .page-portada .recent-posts .card-title,
.opinion-article .card-title { .page-portada .opinion-article .card-title {
color: white; color: var(--white);
margin: 0; margin: 0;
font-weight: 600; font-weight: 600;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
@ -172,53 +207,51 @@ button[type="reset"] {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.recent-posts .card-title a, .page-portada .recent-posts .card-title a,
.opinion-article .card-title a { .page-portada .opinion-article .card-title a {
color: white; color: var(--white);
text-decoration: none; text-decoration: none;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.recent-posts .card-title a:hover { .page-portada .recent-posts .card-title a:hover {
color: var(--rojo-cnt); color: var(--rojo-cnt);
} }
.recent-posts .card.secondary-article .card-title { .page-portada .recent-posts .card.secondary-article .card-title {
font-size: medium; font-size: medium;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.recent-posts .card-img-overlay { .page-portada .recent-posts .card-img-overlay {
height: 18%; height: 18%;
} }
.recent-posts .card-title { .page-portada .recent-posts .card-title {
font-size: 0.9rem; font-size: 0.9rem;
} }
.recent-posts .media-mb { .page-portada .recent-posts .media-mb {
margin-bottom: 1rem; /* o el valor que necesites */ margin-bottom: 1rem; /* o el valor que necesites */
} }
} }
/* PORTADA -> Titles */ /* PORTADA -> ENLACES */
.sp-module-title::after{ .btn-hover .btn-image-only {
background: var(--rojo-cnt); overflow: hidden;
content: ""; border-radius: 0.375rem;
height: 1px; transition: box-shadow 0.3s ease;
left: 0;
position: absolute;
bottom: -12px;
width: 150px;
} }
.sp-module-title::before{ .btn-hover .btn-image-only img {
background: var(--rojo-cnt); transition: transform 0.3s ease;
content: ""; }
height: 1px;
left: 0; .btn-hover:hover .btn-image-only {
position: absolute; box-shadow: 0 0 15px var(--rojo-cnt);
bottom: -15px; }
width: 150px;
.btn-hover:hover .btn-image-only img {
transform: scale(1.08);
} }
/* PORTADA -> SECTION VIDEO */ /* PORTADA -> SECTION VIDEO */
@ -246,14 +279,14 @@ button[type="reset"] {
} }
.btn-outline-white { .btn-outline-white {
color: white; color: var(--white);
border-color: white; border-color: var(--white);
background-color: transparent; background-color: transparent;
} }
.btn-outline-white:hover { .btn-outline-white:hover {
background-color: white; background-color: var(--white);
border-color: white; border-color: var(--white);
} }
.svg-hover-white:hover { .svg-hover-white:hover {
@ -271,6 +304,10 @@ button[type="reset"] {
height: auto; height: auto;
} }
.servicios .card .card-body .card-title {
width: fit-content;
}
.enlaces button:not(.collapsed) { .enlaces button:not(.collapsed) {
background-color: var(--rojo-cnt); background-color: var(--rojo-cnt);
color: #fff; color: #fff;
@ -346,7 +383,7 @@ button[type="reset"] {
border-radius: 25px !important; border-radius: 25px !important;
background-color: var(--rojo-cnt); background-color: var(--rojo-cnt);
border: 2px solid var(--rojo-cnt); border: 2px solid var(--rojo-cnt);
color: white; color: var(--white);
padding: 15px 30px; padding: 15px 30px;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
@ -419,3 +456,86 @@ button[type="reset"] {
padding: 12px 25px; padding: 12px 25px;
} }
} }
/* Texto sección tease.twig */
.link-underline-animate {
position: relative;
text-decoration: none;
transition: color 0.3s ease;
}
.link-underline-animate::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: var(--rojo-cnt); /* color del subrayado */
transition: all 0.3s ease;
transform: translateX(-50%);
}
.link-underline-animate:hover {
color: var(--rojo-cnt) !important; /* color del texto al hacer hover */
}
.link-underline-animate:hover::after {
width: 100%;
}
/* search page */
.offcanvas-body {
height: 18vh!important; /* altura del 18% del viewport */
}
/* Resetear estilos de Bootstrap en la paginación */
.pagination-block .pagination {
margin-bottom: 0;
}
.pagination-block .page-item {
display: flex;
align-items: center;
margin: 0; /* Resetear margin por defecto */
}
/* Estilos específicos para números de página */
.page-number {
padding: 10px 15px !important;
min-width: 44px;
text-align: center;
border-color: var(--reset);
background-color: var(--reset);
border-radius: 10px;
color: var(--white);
}
.current-page {
border-radius: 75px !important; /* Mismo border-radius que activos */
}
.btn-pagination-position {
display: inline-flex;
align-items: end;
justify-content: center;
min-height: 44px;
}
.btn-no-hover {
transition: none !important;
pointer-events: none;
cursor: default !important;
}
.btn-page-hover:hover {
color: var(--black);
background-color: var(--white);
border-color: var(--black);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}
a.btn-page-hover:hover {
border: 2px solid var(--black) !important;
}

2
views/layouts/base.twig
View File

@ -48,7 +48,7 @@
{% endif %} {% endif %}
<div class="wrapper"> <div class="wrapper">
{% block content %} {% block content %}
Sorry, no content Lo siento, no hay contenido.
{% endblock %} {% endblock %}
</div> </div>
</section> </section>

32
views/partials/btn-search.twig
View File

@ -1,16 +1,18 @@
<button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop"> <section class="section-search">
<i class="bi bi-search"></i> <button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
</button> <i class="bi bi-search"></i>
</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel"> <div class="offcanvas offcanvas-top mt-3" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel" style="max-height: 18vh;">
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasTopLabel">Búsqueda</h5> <h5 class="offcanvas-title" id="offcanvasTopLabel">Búsqueda</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div> </div>
<div class="offcanvas-body"> <div class="offcanvas-body">
<form class="d-flex mt-3" role="search"> <form class="d-flex mt-3" role="search" method="get" action="/">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/> <input class="form-control me-2" type="search" name="s" placeholder="Buscar..." aria-label="Search"/>
<button class="btn btn-outline-success" type="submit">Search</button> <button class="btn btn-primary-cnt" type="submit">Buscar</button>
</form> </form>
</div> </div>
</div> </div>
</section>

41
views/partials/pagination.twig
View File

@ -1,43 +1,60 @@
{% if posts.pagination.pages is not empty %} {% if posts.pagination.pages is not empty %}
<nav class="pagination-block"> <nav class="pagination-block d-flex justify-content-center">
<ul class="pagination"> <ul class="pagination">
{# First #} {# First #}
{% if (posts.pagination.pages|first) and posts.pagination.pages|first.current != true %} {% if (posts.pagination.pages|first) and posts.pagination.pages|first.current != true %}
<li class="first btn"> <li class="first mx-2 border border-0">
<a href="{{ posts.pagination.pages|first.link }}">First</a> <a href="{{ posts.pagination.pages|first.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Inicio</a>
</li> </li>
{% else %} {% else %}
<li class="first btn disabled"><button disabled>First</button></li> <li class="first disabled mx-2 border border-0" >
<button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Inicio</button>
</li>
{% endif %} {% endif %}
{# Previous #} {# Previous #}
{% if posts.pagination.prev %} {% if posts.pagination.prev %}
<li class="prev btn"><a href="{{ posts.pagination.prev.link }}">Previous</a></li> <li class="prev mx-2 border border-0">
<a href="{{ posts.pagination.prev.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Anterior</a>
</li>
{% else %} {% else %}
<li class="prev btn disabled"><button disabled>Previous</button></li> <li class="prev disabled mx-2 border border-0">
<button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Anterior</button>
</li>
{% endif %} {% endif %}
{# Pages #} {# Pages #}
{% for page in posts.pagination.pages %} {% for page in posts.pagination.pages %}
{% if page.link %} {% if page.link %}
<li><a href="{{ page.link }}" class="{{ page.class }}">{{ page.title }}</a></li> <li class="mx-2 btn-pagination-position">
<a href="{{ page.link }}" class="{{ page.class }} text-decoration-none btn-page-hover" >{{ page.title }}</a>
</li>
{% else %} {% else %}
<li class="current"><span class="{{ page.class }}">{{ page.title }}</span></li> <li class="current mx-2 btn-pagination-position">
<span class="{{ page.class }}">{{ page.title }}</span>
</li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{# Next #} {# Next #}
{% if posts.pagination.next %} {% if posts.pagination.next %}
<li class="next btn"><a href="{{ posts.pagination.next.link }}">Next</a></li> <li class="next mx-2 border border-0">
<a href="{{ posts.pagination.next.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Siguiente</a>
</li>
{% else %} {% else %}
<li class="next btn disabled"><button disabled>Next</button></li> <li class="next disabled mx-2 border border-0">
<button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Siguiente</button>
</li>
{% endif %} {% endif %}
{# Last #} {# Last #}
{% if (posts.pagination.pages|last) and posts.pagination.pages|last.current != true %} {% if (posts.pagination.pages|last) and posts.pagination.pages|last.current != true %}
<li class="last btn"><a href="{{ posts.pagination.pages|last.link }}">Last</a></li> <li class="last mx-2 border border-0">
<a href="{{ posts.pagination.pages|last.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Última</a></li>
{% else %} {% else %}
<li class="last btn disabled"><button disabled>Last</button></li> <li class="last disabled mx-2 border border-0">
<button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Última</button>
</li>
{% endif %} {% endif %}
</ul> </ul>
</nav> </nav>

274
views/partials/section-videos.twig
View File

@ -1,157 +1,155 @@
<section class="py-4"> <div class="container">
<div class="container"> <div class="row align-items-stretch">
<div class="row align-items-stretch">
{# Primera columna - Carousel con vídeos embebidos #} {# Primera columna - Carousel con vídeos embebidos #}
<div class="col-lg-8 col-12 mb-4 mb-lg-0"> <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> <p class="mb-4 position-relative fs-4 fw-bold sp-module-title">VÍDEOS</p>
{% if videos %} {% if videos %}
<div id="videosCarousel" class="carousel slide" data-bs-ride="carousel"> <div id="videosCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner"> <div class="carousel-inner">
{% for pair in videos|batch(2, null) %} {% for pair in videos|batch(2, null) %}
<div class="carousel-item {% if loop.first %}active{% endif %}"> <div class="carousel-item {% if loop.first %}active{% endif %}">
<div class="row"> <div class="row">
{% for video in pair %} {% for video in pair %}
{% if video %} {% if video %}
<div class="col-6"> <div class="col-6">
<div class="video-item"> <div class="video-item">
{% set url_video = video.meta('url_video') %} {% set url_video = video.meta('url_video') %}
{% set video_data = generar_embed(url_video) %} {% set video_data = generar_embed(url_video) %}
{% if video_data %} {% if video_data %}
{# Thumbnail clickeable en lugar del iframe #} {# Thumbnail clickeable en lugar del iframe #}
<div class="ratio ratio-16x9 video-thumbnail-container position-relative rounded" <div class="ratio ratio-16x9 video-thumbnail-container position-relative rounded"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#videoModal" data-bs-target="#videoModal"
data-video-url="{{ video_data.embed_url }}" data-video-url="{{ video_data.embed_url }}"
data-video-title="{{ video.titulo }}" data-video-title="{{ video.titulo }}"
data-video-allow="{{ video_data.allow }}" data-video-allow="{{ video_data.allow }}"
style="cursor: pointer; style="cursor: pointer;
background-image: url('{{ video_data.thumbnail_url }}'); background-image: url('{{ video_data.thumbnail_url }}');
background-size: cover; background-size: cover;
background-position: center;"> background-position: center;">
{# Overlay con botón play #} {# 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="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" <div class="btn btn-danger btn-lg rounded-circle d-flex align-items-center justify-content-center"
style="width: 60px; height: 60px;"> style="width: 60px; height: 60px;">
<i class="bi bi-play-btn" style="font-size: 2rem;"></i> <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>
</div> </div>
{% else %} {# Overlay oscuro al hover #}
<div class="alert alert-warning"> <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-0 hover-overlay"
<h5>{{ video.titulo }}</h5> style="transition: opacity 0.3s ease;">
<p class="mb-0">No se ha configurado URL para este vídeo.</p> </div>
</div>
{% endif %} {# 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> </div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{# carousel controls buttons#} {% else %}
{% if videos|length > 1 %} <div class="alert alert-warning">
<button class="carousel-control-prev" type="button" data-bs-target="#videosCarousel" data-bs-slide="prev"> <h5>{{ video.titulo }}</h5>
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <p class="mb-0">No se ha configurado URL para este vídeo.</p>
<span class="visually-hidden">Anterior</span> </div>
</button> {% endif %}
<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|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>
{# 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>
{# Segunda columna - Último artículo de opinión #}
<div class="col-lg-4 col-12 opinion-article d-flex flex-column">
<p class="mb-4 position-relative fs-4 fw-bold sp-module-title">OPINIÓN</p>
<div class="flex-grow-1 d-flex">
{% if ultimo_articulo_opinion %}
{% for article in ultimo_articulo_opinion %}
<div class="card w-100 h-100 secondary-article">
<a class="h-100" href="{{ article.link }}">
<img src="{{ article.thumbnail.src('medium') }}"
alt="{{ article.thumbnail.alt }}"
class="card-img h-100 object-fit-cover"/>
<div class="card-img-overlay d-flex flex-column justify-content-end align-items-start">
<div>
<!-- Título -->
<p class="card-title text-wrap fs-6">
<a href="{{ article.link }}" class="text-white text-decoration-none">{{ article.title }}</a>
</p>
<!-- Icono + autor -->
<p class="text-white mb-0 fs-7 d-flex align-items-center">
<i class="bi bi-person me-1"></i>
{{ article.author }}
</p>
</div> </div>
</div> </div>
</a> {% endif %}
{% endfor %}
</div>
</div> </div>
{% endfor %} {% endfor %}
{% else %} </div>
<p class="text-muted">No hay artículos de opinión disponibles.</p>
{# carousel controls buttons#}
{% 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>
</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|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 %} {% endif %}
</div> </div>
</div>
{% else %}
<p>No hay vídeos disponibles.</p>
{% endif %}
</div> </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>
{# Segunda columna - Último artículo de opinión #}
<div class="col-lg-4 col-12 opinion-article d-flex flex-column">
<p class="mb-4 position-relative fs-4 fw-bold sp-module-title">OPINIÓN</p>
<div class="flex-grow-1 d-flex">
{% if ultimo_articulo_opinion %}
{% for article in ultimo_articulo_opinion %}
<div class="card w-100 h-100 secondary-article">
<a class="h-100" href="{{ article.link }}">
<img src="{{ article.thumbnail.src('medium') }}"
alt="{{ article.thumbnail.alt }}"
class="card-img h-100 object-fit-cover"/>
<div class="card-img-overlay d-flex flex-column justify-content-end align-items-start">
<div>
<!-- Título -->
<p class="card-title text-wrap fs-6">
<a href="{{ article.link }}" class="text-white text-decoration-none">{{ article.title }}</a>
</p>
<!-- Icono + autor -->
<p class="text-white mb-0 fs-7 d-flex align-items-center">
<i class="bi bi-person me-1"></i>
{{ article.author }}
</p>
</div>
</div>
</a>
</div>
{% endfor %}
{% else %}
<p class="text-muted">No hay artículos de opinión disponibles.</p>
{% endif %}
</div>
</div>
</div> </div>
</section> </div>

2
views/partials/tease-post.twig
View File

@ -6,7 +6,7 @@
{{ {{
post.excerpt({ post.excerpt({
words: 5, words: 5,
read_more: 'Keep reading' read_more: 'Sigue leyendo'
}) })
}} }}
</p> </p>

37
views/partials/tease.twig
View File

@ -1,9 +1,30 @@
<article class="tease tease-{{ post.type }}" id="tease-{{ post.id }}"> <article class="tease tease-{{ post.type }} border border-black rounded my-3 p-2 position-relative"
{% block content %} id="tease-{{ post.id }}"
<h2 class="h2"><a href="{{ post.link }}">{{ post.title }}</a></h2> style="padding-bottom: 65px !important;">
<p>{{ post.excerpt }}</p> <div class="row align-items-center section-tease">
{% if post.thumbnail %} <!-- Columna izquierda: título y excerpt -->
<img src="{{ post.thumbnail.src }}" /> <div class="col">
{% endif %} <h2 class="h2">
{% endblock %} <a href="{{ post.link }}"
class="text-decoration-none text-dark link-underline-animate">
{{ post.title }}</a>
</h2>
<p>{{ post.excerpt({
words: 50,
read_more: ''
})
}}</p>
<a href="{{ post.link }}"
class="btn position-absolute btn-secondary-cnt"
style="position: absolute; bottom: 15px; right: 15px; z-index: 10;"
>Sigue leyendo...</a>
</div>
<!-- Columna derecha: imagen (si existe) -->
{% if post.thumbnail %}
<div class="col-auto text-end">
<img src="{{ post.thumbnail.src }}" style="max-height: 100px;" alt="{{ post.title }}" class="img-fluid ms-auto d-block" />
</div>
{% endif %}
</div>
</article> </article>

2
views/partials/top-bar.twig
View File

@ -16,7 +16,9 @@
<!-- Right side: RRSS --> <!-- Right side: RRSS -->
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
{% include "partials/btn-search.twig" with {'items': menu.get_items} %} {% include "partials/btn-search.twig" with {'items': menu.get_items} %}
<div class="btn-group m-1" role="group" aria-label="First group"> <div class="btn-group m-1" role="group" aria-label="First group">
{% for red in redes_sociales %} {% for red in redes_sociales %}
<a href="{{ red.url }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer"> <a href="{{ red.url }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">

48
views/templates/page-noticias.twig
View File

@ -8,31 +8,31 @@
{% for noticias in recent_posts_noticias %} {% for noticias in recent_posts_noticias %}
<div class="card my-3 position-relative"> <div class="card my-3 position-relative">
<div class="row g-0"> <div class="row g-0">
<div class="col-md-4"> <div class="col-md-4">
<img src="{{ noticias.thumbnail.src }}" <img src="{{ noticias.thumbnail.src }}"
class="rounded-start object-fit-cover w-100 h-100" class="rounded-start object-fit-cover w-100 h-100"
alt="{{ noticias.thumbnail.alt }}" alt="{{ noticias.thumbnail.alt }}"
style="min-height: 200px;" 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 position-absolute btn-secondary-cnt"
style="position: absolute; bottom: 15px; right: 15px; z-index: 10;"
>Sigue leyendo...</a>
</div>
</div>
</div> </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 position-absolute btn-secondary-cnt"
style="position: absolute; bottom: 15px; right: 15px; z-index: 10;"
>Sigue leyendo...</a>
</div>
</div>
</div>
</div> </div>
{% endfor %} {% endfor %}

98
views/templates/page-portada.twig
View File

@ -48,74 +48,74 @@
{# Sección Logos #} {# Sección Logos #}
{% if botones_imagen %} {% if botones_imagen %}
<section class="custom-buttons-section my-5"> <section class="custom-buttons-section margin-50">
<p class="mb-4 position-relative fs-4 fw-bold sp-module-title">ENLACES</p> <p class="mb-4 position-relative fs-4 fw-bold sp-module-title">ENLACES</p>
<div class="row g-3"> <div class="row g-3">
{% for boton in botones_imagen %} {% for boton in botones_imagen %}
<div class="col-md-3 col-sm-6"> <div class="col-md-3 col-sm-6 btn-hover">
<a href="{{ boton.enlace }}" class="btn-image-only d-block" target="_blank" rel="noopener noreferrer"> <a href="{{ boton.enlace }}" class="btn-image-only d-block" target="_blank" rel="noopener noreferrer">
<img src="{{ boton.imagen.sizes.medium }}" <img src="{{ boton.imagen.sizes.medium }}"
alt="{{ boton.imagen.alt }}" alt="{{ boton.imagen.alt }}"
class="img-fluid rounded"> class="img-fluid rounded">
</a> </a>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</section> </section>
{% endif %} {% endif %}
{# Sección vídeos #} {# Sección vídeos #}
{% include 'partials/section-videos.twig' %} <section class="py-4 margin-50">
{% include 'partials/section-videos.twig' %}
</section>
{# Sección Campañas / conlfictos #} {# Sección Campañas / conflictos #}
<section class="recent-posts py-4"> <section class="recent-posts py-4">
<div class="container"> <div class="container">
<div class="row align-items-stretch"> <div class="row align-items-stretch">
{% if posts_campana %} {% if posts_campana %}
<div class="col-6"> <div class="col-6">
<p class="mb-4 position-relative fs-4 fw-bold sp-module-title">CAMPAÑAS</p> <p class="mb-4 position-relative fs-4 fw-bold sp-module-title">CAMPAÑAS</p>
{% set main_article = posts_campana[0] %} {% set main_article = posts_campana[0] %}
<div class="card main-article"> <div class="card main-article">
<a href="{{ main_article.link }}"> <a href="{{ main_article.link }}">
<img src="{{ main_article.thumbnail.src('medium') }}" <img src="{{ main_article.thumbnail.src('medium') }}"
alt="{{ main_article.thumbnail.alt }}" alt="{{ main_article.thumbnail.alt }}"
class="card-img card-img-fixed" /> class="card-img card-img-fixed" />
<div class="card-img-overlay"> <div class="card-img-overlay">
<h3 class="card-title text-wrap"> <h3 class="card-title text-wrap">
<a href="{{ main_article.link }}">{{ main_article.title }}</a> <a href="{{ main_article.link }}">{{ main_article.title }}</a>
</h3> </h3>
</div>
</div> </div>
</div> </div>
</div> {% else %}
{% else %} <h2>no hay artículos</h2>
<h2>no hay artículos</h2> {% endif %}
{% endif %}
{% if posts_campana %} {% if posts_campana %}
<div class="col-6"> <div class="col-6">
<p class="mb-4 position-relative fs-4 fw-bold sp-module-title">CONFLICTOS LABORALES</p> <p class="mb-4 position-relative fs-4 fw-bold sp-module-title">CONFLICTOS LABORALES (WIP)</p>
{% set main_article = posts_campana[0] %} {% set main_article = posts_campana[0] %}
<div class="card main-article"> <div class="card main-article">
<a href="{{ main_article.link }}"> <a href="{{ main_article.link }}">
<img src="{{ main_article.thumbnail.src('medium') }}" <img src="{{ main_article.thumbnail.src('medium') }}"
alt="{{ main_article.thumbnail.alt }}" alt="{{ main_article.thumbnail.alt }}"
class="card-img card-img-fixed" /> class="card-img card-img-fixed" />
<div class="card-img-overlay"> <div class="card-img-overlay">
<h3 class="card-title text-wrap"> <h3 class="card-title text-wrap">
<a href="{{ main_article.link }}">{{ main_article.title }}</a> <a href="{{ main_article.link }}">{{ main_article.title }}</a>
</h3> </h3>
</div>
</div> </div>
</div> </div>
</div> {% else %}
{% else %} <h2>no hay artículos</h2>
<h2>no hay artículos</h2> {% endif %}
{% endif %}
</div> </div>
</div> </div>

7
views/templates/page-servicios-privados.twig
View File

@ -3,7 +3,7 @@
{% block content %} {% block content %}
<p class="mb-5 position-relative fs-4 fw-bold sp-module-title">SERVICIOS PRIVADOS</p> <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">SERVICIOS PRIVADOS</p>
<section class="grid servicios-privados"> <section class="grid servicios servicios-privados">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
{% for pagina in subpaginas_servicios_privados %} {% for pagina in subpaginas_servicios_privados %}
@ -18,8 +18,11 @@
<p>no hay thumbnail </p> <p>no hay thumbnail </p>
{% endif %} {% endif %}
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{ pagina.title }}</h5> <a href="{{ pagina.link }}" class="text-decoration-none">
<h5 href="{{ pagina.link }}" class="card-title">{{ pagina.title }}</h5>
</a>
<p class="card-text">{{ pagina.content }}</p> <p class="card-text">{{ pagina.content }}</p>
</div> </div>
</div> </div>
</article> </article>

6
views/templates/page-servicios-publicos.twig
View File

@ -3,7 +3,7 @@
{% block content %} {% block content %}
<p class="mb-5 position-relative fs-4 fw-bold sp-module-title">SERVICIOS PÚBLICOS</p> <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">SERVICIOS PÚBLICOS</p>
<section class="grid servicios-publicos"> <section class="grid servicios servicios-publicos">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
{% for pagina in subpaginas_servicios_publicos %} {% for pagina in subpaginas_servicios_publicos %}
@ -18,7 +18,9 @@
<p>no hay thumbnail </p> <p>no hay thumbnail </p>
{% endif %} {% endif %}
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{ pagina.title }}</h5> <a href="{{ pagina.link }}" class="text-decoration-none">
<h5 href="{{ pagina.link }}" class="card-title fs-4 text-dark link-underline-animate">{{ pagina.title }}</h5>
</a>
<p class="card-text">{{ pagina.content }}</p> <p class="card-text">{{ pagina.content }}</p>
</div> </div>
</div> </div>

30
views/templates/search.twig
View File

@ -2,17 +2,23 @@
{% extends 'layouts/base.twig' %} {% extends 'layouts/base.twig' %}
{% block content %} {% block content %}
<div class="content-wrapper"> <section class="search-canvas ">
{% for post in posts %} <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">BÚSQUEDA</p>
{% include ['partials/tease-' ~ post.type ~ '.twig', 'partials/tease.twig'] %}
{% endfor %} <p>Resultados de búsqueda para: "{{ search_query }}"</p>
<div class="content-wrapper">
{% for post in posts %}
{% include ['partials/tease-' ~ post.type ~ '.twig', 'partials/tease.twig'] %}
{% endfor %}
{% include 'partials/pagination.twig' with {
pagination: posts.pagination({
show_all: false,
mid_size: 3,
end_size: 2
})
} %}
</div>
</section>
{% include 'partials/pagination.twig' with {
pagination: posts.pagination({
show_all: false,
mid_size: 3,
end_size: 2
})
} %}
</div>
{% endblock %} {% endblock %}

32
views/templates/single-servicios.twig Normal file
View File

@ -0,0 +1,32 @@
{% extends 'layouts/base.twig' %}
{% block content %}
{# <p>Servicios test</p> #}
<div class="container">
<article class="post-type-{{ post.type }}" id="post-{{ post.id }}">
<section class="article-content mt-5 border-dark border-top">
<!-- Title & author & date -->
<h1 class="article-h1">{{ post.title }}</h1>
<p class="blog-author mt-3 mb-5 border-dark border-bottom">
<span>Autor:</span>
<a href="{{ post.author.path }}">{{ post.author.name }}</a>
<span>&bull;</span>
<time datetime="{{ post.date|date('Y-m-d H:i:s') }}">{{ post.date }}</time>
</p>
<!-- Img & Content -->
<div class="d-flex justify-content-center my-5">
<img src="{{ post.thumbnail.src }}"
alt="{{ post.thumbnail.alt }}"
class="img-fluid object-fit-contain border border-1 rounded p-3"
style="max-width: 500px; max-height: 300px;"
/>
</div>
<div class="article-body">{{ post.content }}</div>
</section>
</article>
</div>
{% endblock %}

4
views/templates/single.twig
View File

@ -1,9 +1,11 @@
{% extends 'layouts/base.twig' %} {% extends 'layouts/base.twig' %}
{% block content %} {% block content %}
{# <h1>SINGLE ARTÍCULOS</h1> #}
<div class="container"> <div class="container">
<article class="post-type-{{ post.type }}" id="post-{{ post.id }}"> <article class="post-type-{{ post.type }}" id="post-{{ post.id }}">
<!-- <img src="{{ post.thumbnail.src|resize(1200, 300) }}" /> --> <!-- <img src="{{ post.thumbnail.src }}" /> -->
<section class="article-content mt-5 border-dark border-top"> <section class="article-content mt-5 border-dark border-top">