MODIFY Styles
This commit is contained in:
@ -32,6 +32,7 @@ class StarterSite extends Site {
|
||||
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_videos_embed_to_twig']); //videos embed
|
||||
add_action('pre_get_posts', array($this, 'exclude_pages_from_search')); //exclude pages with ACF
|
||||
|
||||
parent::__construct();
|
||||
}
|
||||
@ -554,6 +555,24 @@ class StarterSite extends Site {
|
||||
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
|
||||
public function add_global_context($context) {
|
||||
|
||||
|
||||
212
style.css
212
style.css
@ -9,6 +9,8 @@
|
||||
--rojo-cnt-dark: #9d1b1d;
|
||||
--rojo-cnt-light: #d6453f;
|
||||
--reset: #7b7b7b;
|
||||
--white:#fff;
|
||||
--black:#000000ff;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@ -19,12 +21,17 @@
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* PORTADA -> ENLACES */
|
||||
.margin-50 {
|
||||
margin: 50px 0 !important;
|
||||
}
|
||||
|
||||
/* Botón primario */
|
||||
.btn-primary-cnt {
|
||||
border-radius: 75px !important;
|
||||
background-color: var(--rojo-cnt);
|
||||
border: 2px solid var(--rojo-cnt);
|
||||
color: white;
|
||||
color: var(--white);
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
@ -35,10 +42,11 @@
|
||||
|
||||
/* Botón primario - hover */
|
||||
.btn-primary-cnt:hover {
|
||||
background-color: var(--rojo-cnt-dark);
|
||||
border-color: var(--rojo-cnt-dark);
|
||||
color: var(--black);
|
||||
background-color: white;
|
||||
border-color: var(--black);
|
||||
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 */
|
||||
@ -56,7 +64,7 @@ button[type="reset"] {
|
||||
border-radius: 10px !important;
|
||||
background-color: var(--rojo-cnt-light);
|
||||
border: 2px solid var(--rojo-cnt-light);
|
||||
color: white;
|
||||
color: var(--white);
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
@ -67,10 +75,11 @@ button[type="reset"] {
|
||||
|
||||
/* Botón secundario - hover */
|
||||
.btn-secondary-cnt:hover {
|
||||
background-color: var(--rojo-cnt-light);
|
||||
border-color: var(--rojo-cnt-light);
|
||||
color: var(--black);
|
||||
background-color: var(--white);
|
||||
border-color: var(--black);
|
||||
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 */
|
||||
@ -89,10 +98,31 @@ button[type="reset"] {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
background-color: var(--rojo-cnt) !important;
|
||||
color: white !important;
|
||||
color: var(--white) !important;
|
||||
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 */
|
||||
.text-sindikatua {
|
||||
font-family: 'Yaro', Arial, sans-serif;
|
||||
@ -127,7 +157,7 @@ button[type="reset"] {
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
bottom: 0;
|
||||
height: 25%;
|
||||
@ -137,7 +167,7 @@ button[type="reset"] {
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
bottom: 0;
|
||||
height: 30%;
|
||||
@ -146,21 +176,26 @@ button[type="reset"] {
|
||||
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) {
|
||||
.opinion-article .card-img-overlay {
|
||||
.page-portada .opinion-article .card-img-overlay {
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 990px) {
|
||||
.opinion-article .card-img-overlay {
|
||||
.page-portada .opinion-article .card-img-overlay {
|
||||
height: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.recent-posts .card-title,
|
||||
.opinion-article .card-title {
|
||||
color: white;
|
||||
.page-portada .recent-posts .card-title,
|
||||
.page-portada .opinion-article .card-title {
|
||||
color: var(--white);
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
@ -172,53 +207,51 @@ button[type="reset"] {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.recent-posts .card-title a,
|
||||
.opinion-article .card-title a {
|
||||
color: white;
|
||||
.page-portada .recent-posts .card-title a,
|
||||
.page-portada .opinion-article .card-title a {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.recent-posts .card-title a:hover {
|
||||
.page-portada .recent-posts .card-title a:hover {
|
||||
color: var(--rojo-cnt);
|
||||
}
|
||||
|
||||
.recent-posts .card.secondary-article .card-title {
|
||||
.page-portada .recent-posts .card.secondary-article .card-title {
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.recent-posts .card-img-overlay {
|
||||
.page-portada .recent-posts .card-img-overlay {
|
||||
height: 18%;
|
||||
}
|
||||
|
||||
.recent-posts .card-title {
|
||||
.page-portada .recent-posts .card-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.recent-posts .media-mb {
|
||||
.page-portada .recent-posts .media-mb {
|
||||
margin-bottom: 1rem; /* o el valor que necesites */
|
||||
}
|
||||
}
|
||||
|
||||
/* PORTADA -> Titles */
|
||||
.sp-module-title::after{
|
||||
background: var(--rojo-cnt);
|
||||
content: "";
|
||||
height: 1px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
width: 150px;
|
||||
/* PORTADA -> ENLACES */
|
||||
.btn-hover .btn-image-only {
|
||||
overflow: hidden;
|
||||
border-radius: 0.375rem;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.sp-module-title::before{
|
||||
background: var(--rojo-cnt);
|
||||
content: "";
|
||||
height: 1px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
width: 150px;
|
||||
.btn-hover .btn-image-only img {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-hover:hover .btn-image-only {
|
||||
box-shadow: 0 0 15px var(--rojo-cnt);
|
||||
}
|
||||
|
||||
.btn-hover:hover .btn-image-only img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
/* PORTADA -> SECTION VIDEO */
|
||||
@ -246,14 +279,14 @@ button[type="reset"] {
|
||||
}
|
||||
|
||||
.btn-outline-white {
|
||||
color: white;
|
||||
border-color: white;
|
||||
color: var(--white);
|
||||
border-color: var(--white);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-white:hover {
|
||||
background-color: white;
|
||||
border-color: white;
|
||||
background-color: var(--white);
|
||||
border-color: var(--white);
|
||||
}
|
||||
|
||||
.svg-hover-white:hover {
|
||||
@ -271,6 +304,10 @@ button[type="reset"] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.servicios .card .card-body .card-title {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.enlaces button:not(.collapsed) {
|
||||
background-color: var(--rojo-cnt);
|
||||
color: #fff;
|
||||
@ -346,7 +383,7 @@ button[type="reset"] {
|
||||
border-radius: 25px !important;
|
||||
background-color: var(--rojo-cnt);
|
||||
border: 2px solid var(--rojo-cnt);
|
||||
color: white;
|
||||
color: var(--white);
|
||||
padding: 15px 30px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
@ -419,3 +456,86 @@ button[type="reset"] {
|
||||
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;
|
||||
}
|
||||
@ -48,7 +48,7 @@
|
||||
{% endif %}
|
||||
<div class="wrapper">
|
||||
{% block content %}
|
||||
Sorry, no content
|
||||
Lo siento, no hay contenido.
|
||||
{% endblock %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,157 +1,155 @@
|
||||
<section class="py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-stretch">
|
||||
<div class="container">
|
||||
<div class="row align-items-stretch">
|
||||
|
||||
{# Primera columna - Carousel con vídeos embebidos #}
|
||||
<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 %}
|
||||
<div id="videosCarousel" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
{% for pair in videos|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 %}
|
||||
|
||||
{# 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;">
|
||||
{# Primera columna - Carousel con vídeos embebidos #}
|
||||
<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 %}
|
||||
<div id="videosCarousel" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
{% for pair in videos|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 %}
|
||||
|
||||
{# 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>
|
||||
{# 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>
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{# 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>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{# 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 %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<p>No hay vídeos disponibles.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{# 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>
|
||||
|
||||
{# 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 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>
|
||||
|
||||
{# 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>
|
||||
|
||||
{# 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>
|
||||
</section>
|
||||
</div>
|
||||
@ -48,74 +48,74 @@
|
||||
|
||||
{# Sección Logos #}
|
||||
{% 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>
|
||||
|
||||
<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 class="col-md-3 col-sm-6 btn-hover">
|
||||
<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' %}
|
||||
<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">
|
||||
<div class="container">
|
||||
<div class="row align-items-stretch">
|
||||
<div class="container">
|
||||
<div class="row align-items-stretch">
|
||||
|
||||
{% if posts_campana %}
|
||||
<div class="col-6">
|
||||
<p class="mb-4 position-relative fs-4 fw-bold sp-module-title">CAMPAÑAS</p>
|
||||
{% if posts_campana %}
|
||||
<div class="col-6">
|
||||
<p class="mb-4 position-relative fs-4 fw-bold sp-module-title">CAMPAÑAS</p>
|
||||
|
||||
{% set main_article = posts_campana[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 card-img-fixed" />
|
||||
<div class="card-img-overlay">
|
||||
<h3 class="card-title text-wrap">
|
||||
<a href="{{ main_article.link }}">{{ main_article.title }}</a>
|
||||
</h3>
|
||||
{% set main_article = posts_campana[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 card-img-fixed" />
|
||||
<div class="card-img-overlay">
|
||||
<h3 class="card-title text-wrap">
|
||||
<a href="{{ main_article.link }}">{{ main_article.title }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<h2>no hay artículos</h2>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<h2>no hay artículos</h2>
|
||||
{% endif %}
|
||||
|
||||
{% if posts_campana %}
|
||||
<div class="col-6">
|
||||
<p class="mb-4 position-relative fs-4 fw-bold sp-module-title">CONFLICTOS LABORALES</p>
|
||||
{% if posts_campana %}
|
||||
<div class="col-6">
|
||||
<p class="mb-4 position-relative fs-4 fw-bold sp-module-title">CONFLICTOS LABORALES (WIP)</p>
|
||||
|
||||
{% set main_article = posts_campana[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 card-img-fixed" />
|
||||
<div class="card-img-overlay">
|
||||
<h3 class="card-title text-wrap">
|
||||
<a href="{{ main_article.link }}">{{ main_article.title }}</a>
|
||||
</h3>
|
||||
{% set main_article = posts_campana[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 card-img-fixed" />
|
||||
<div class="card-img-overlay">
|
||||
<h3 class="card-title text-wrap">
|
||||
<a href="{{ main_article.link }}">{{ main_article.title }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<h2>no hay artículos</h2>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% else %}
|
||||
<h2>no hay artículos</h2>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user