Compare commits
2 Commits
3118b35dbc
...
edb558c2d5
| Author | SHA1 | Date | |
|---|---|---|---|
| edb558c2d5 | |||
| 81f7145333 |
@ -1,5 +1,61 @@
|
|||||||
jQuery( document ).ready( function( $ ) {
|
// jQuery( document ).ready( function( $ ) {
|
||||||
|
// console.log('modal')
|
||||||
|
|
||||||
// Your JavaScript goes here
|
// $(document).ready(function () {
|
||||||
|
// const $videoModal = $('#videoModal');
|
||||||
|
// const $modalIframe = $('#modalVideoIframe');
|
||||||
|
// const $modalTitle = $('#videoModalLabel');
|
||||||
|
|
||||||
|
// // Cuando se abre el modal
|
||||||
|
// $videoModal.on('show.bs.modal', function (event) {
|
||||||
|
// const $button = $(event.relatedTarget);
|
||||||
|
// const videoUrl = $button.data('video-url');
|
||||||
|
// const videoTitle = $button.data('video-title');
|
||||||
|
// const videoAllow = $button.data('video-allow');
|
||||||
|
|
||||||
|
// const separator = videoUrl.includes('?') ? '&' : '?';
|
||||||
|
// const autoplayUrl = videoUrl + separator + 'autoplay=1';
|
||||||
|
|
||||||
|
// $modalIframe.attr('src', autoplayUrl);
|
||||||
|
// $modalIframe.attr('title', videoTitle);
|
||||||
|
// $modalIframe.attr('allow', videoAllow);
|
||||||
|
// $modalTitle.text(videoTitle);
|
||||||
|
// });
|
||||||
|
|
||||||
|
// // Cuando se cierra el modal, parar el vídeo
|
||||||
|
// $videoModal.on('hide.bs.modal', function () {
|
||||||
|
// $modalIframe.attr('src', '');
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
// });
|
||||||
|
|
||||||
|
console.log('hello')
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const videoModal = document.getElementById('videoModal');
|
||||||
|
const modalIframe = document.getElementById('modalVideoIframe');
|
||||||
|
const modalTitle = document.getElementById('videoModalLabel');
|
||||||
|
|
||||||
|
// Cuando se abre el modal
|
||||||
|
videoModal.addEventListener('show.bs.modal', function (event) {
|
||||||
|
const button = event.relatedTarget;
|
||||||
|
const videoUrl = button.getAttribute('data-video-url');
|
||||||
|
const videoTitle = button.getAttribute('data-video-title');
|
||||||
|
const videoAllow = button.getAttribute('data-video-allow');
|
||||||
|
|
||||||
|
// Añadir autoplay al URL si no lo tiene
|
||||||
|
const separator = videoUrl.includes('?') ? '&' : '?';
|
||||||
|
const autoplayUrl = videoUrl + separator + 'autoplay=1';
|
||||||
|
|
||||||
|
modalIframe.src = autoplayUrl;
|
||||||
|
modalIframe.title = videoTitle;
|
||||||
|
modalIframe.allow = videoAllow;
|
||||||
|
modalTitle.textContent = videoTitle;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cuando se cierra el modal, parar el vídeo
|
||||||
|
videoModal.addEventListener('hide.bs.modal', function () {
|
||||||
|
modalIframe.src = '';
|
||||||
|
});
|
||||||
});
|
});
|
||||||
@ -31,9 +31,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_youtube_function_to_twig']);
|
add_filter('timber/twig', [$this, 'add_videos_embed_to_twig']); //videos embed
|
||||||
add_filter('timber/twig', [$this, 'add_videos_embed_to_twig']);
|
|
||||||
|
|
||||||
|
|
||||||
parent::__construct();
|
parent::__construct();
|
||||||
}
|
}
|
||||||
@ -48,9 +46,9 @@ class StarterSite extends Site {
|
|||||||
wp_enqueue_style( 'twbsi', get_template_directory_uri() . '/vendor/twbs/bootstrap-icons/font/bootstrap-icons.min.css', [], $version, 'all');
|
wp_enqueue_style( 'twbsi', get_template_directory_uri() . '/vendor/twbs/bootstrap-icons/font/bootstrap-icons.min.css', [], $version, 'all');
|
||||||
wp_enqueue_style( 'lust', get_template_directory_uri() . '/style.css', [], $version, 'all');
|
wp_enqueue_style( 'lust', get_template_directory_uri() . '/style.css', [], $version, 'all');
|
||||||
|
|
||||||
//~ wp_enqueue_script( 'pop', get_template_directory_uri() . '/static/popper.min.js', [], $version, false);
|
// wp_enqueue_script( 'pop', get_template_directory_uri() . '/static/popper.min.js', [], $version, false);
|
||||||
wp_enqueue_script( 'twbs', get_template_directory_uri() . '/vendor/twbs/bootstrap/dist/js/bootstrap.min.js', [], $version, false);
|
wp_enqueue_script( 'twbs', get_template_directory_uri() . '/vendor/twbs/bootstrap/dist/js/bootstrap.min.js', [], $version, false);
|
||||||
//wp_enqueue_script( 'lust', get_template_directory_uri() . '/static/site.js', [], $version, false);
|
wp_enqueue_script( 'lust', get_template_directory_uri() . '/assets/scripts/site.js', [], $version, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -192,6 +190,11 @@ class StarterSite extends Site {
|
|||||||
return $options;
|
return $options;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* New functions to add Sindikatua theme
|
||||||
|
* @author Gustavo
|
||||||
|
*/
|
||||||
|
|
||||||
//add svg files
|
//add svg files
|
||||||
public function add_svg_support($file_types) {
|
public function add_svg_support($file_types) {
|
||||||
$new_filetypes = array();
|
$new_filetypes = array();
|
||||||
@ -229,6 +232,7 @@ class StarterSite extends Site {
|
|||||||
|
|
||||||
private function getIconsRRSS() {
|
private function getIconsRRSS() {
|
||||||
$icons_rrss = [];
|
$icons_rrss = [];
|
||||||
|
|
||||||
for ($i = 1; $i <= 4; $i++) {
|
for ($i = 1; $i <= 4; $i++) {
|
||||||
$img = get_field('rrss_img_' . $i, 'option');
|
$img = get_field('rrss_img_' . $i, 'option');
|
||||||
$url = get_field('rrss_url_' . $i, 'option');
|
$url = get_field('rrss_url_' . $i, 'option');
|
||||||
@ -246,7 +250,7 @@ class StarterSite extends Site {
|
|||||||
|
|
||||||
private function getLogosHeader ($max_logos = 2) {
|
private function getLogosHeader ($max_logos = 2) {
|
||||||
$logos = [];
|
$logos = [];
|
||||||
|
|
||||||
for ($i = 1; $i <= $max_logos; $i++) {
|
for ($i = 1; $i <= $max_logos; $i++) {
|
||||||
$logoHeader = get_field('logo_header_' . $i, 'option');
|
$logoHeader = get_field('logo_header_' . $i, 'option');
|
||||||
$textoHeader = get_field('texto_header_' . $i, 'option');
|
$textoHeader = get_field('texto_header_' . $i, 'option');
|
||||||
@ -260,13 +264,12 @@ class StarterSite extends Site {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return $logos;
|
return $logos;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private function getVideosCarousel($cantidad = 2) {
|
private function getVideosCarousel() {
|
||||||
return Timber::get_posts([
|
return Timber::get_posts([
|
||||||
'post_type' => 'videos',
|
'post_type' => 'videos',
|
||||||
'posts_per_page' => $cantidad,
|
'posts_per_page' => -1, // -1 = sin límite
|
||||||
'post_status' => 'publish',
|
'post_status' => 'publish',
|
||||||
'orderby' => 'date',
|
'orderby' => 'date',
|
||||||
'order' => 'DESC'
|
'order' => 'DESC'
|
||||||
@ -283,17 +286,15 @@ class StarterSite extends Site {
|
|||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Añadir en functions.php si no la tienes ya
|
private function getCampanaArticles() {
|
||||||
// private function obtener_youtube_id($url) {
|
return Timber::get_posts([
|
||||||
// $pattern = '/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/';
|
'post_type' => 'campana',
|
||||||
// preg_match($pattern, $url, $matches);
|
'posts_per_page' => 1,
|
||||||
// return isset($matches[1]) ? $matches[1] : false;
|
'post_status' => 'publish',
|
||||||
// }
|
'orderby' => 'date',
|
||||||
|
'order' => 'DESC'
|
||||||
// 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) {
|
public function generar_embed_universal($url) {
|
||||||
if (empty($url)) {
|
if (empty($url)) {
|
||||||
@ -304,12 +305,13 @@ class StarterSite extends Site {
|
|||||||
if (strpos($url, 'youtube.com') !== false || strpos($url, 'youtu.be') !== false) {
|
if (strpos($url, 'youtube.com') !== false || strpos($url, 'youtu.be') !== false) {
|
||||||
//error_log('es un vídeo de youtube'); // Debug
|
//error_log('es un vídeo de youtube'); // Debug
|
||||||
preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/', $url, $matches);
|
preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/', $url, $matches);
|
||||||
|
|
||||||
if (!empty($matches[1])) {
|
if (!empty($matches[1])) {
|
||||||
$embed_data = [
|
$embed_data = [
|
||||||
'platform' => 'youtube',
|
'platform' => 'youtube',
|
||||||
'embed_url' => 'https://www.youtube.com/embed/' . $matches[1] . '?rel=0&modestbranding=1',
|
'embed_url' => 'https://www.youtube.com/embed/' . $matches[1] . '?rel=0&modestbranding=1',
|
||||||
'allow' => 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
|
'thumbnail_url' => 'https://img.youtube.com/vi/' . $matches[1]. '/hqdefault.jpg',
|
||||||
|
'allow' => 'autoplay; encrypted-media; picture-in-picture'
|
||||||
];
|
];
|
||||||
|
|
||||||
//error_log('Embed URL generada: ' . $embed_data['embed_url']);
|
//error_log('Embed URL generada: ' . $embed_data['embed_url']);
|
||||||
@ -357,6 +359,7 @@ class StarterSite extends Site {
|
|||||||
$context['logos_header'] = $this->getLogosHeader();
|
$context['logos_header'] = $this->getLogosHeader();
|
||||||
$context['videos_carousel'] = $this->getVideosCarousel();
|
$context['videos_carousel'] = $this->getVideosCarousel();
|
||||||
$context['ultimo_articulo_opinion'] = $this->getUltimoArticuloOpinion();
|
$context['ultimo_articulo_opinion'] = $this->getUltimoArticuloOpinion();
|
||||||
|
$context['posts_campana'] = $this->getCampanaArticles();
|
||||||
|
|
||||||
return $context;
|
return $context;
|
||||||
}
|
}
|
||||||
|
|||||||
89
style.css
89
style.css
@ -11,7 +11,12 @@
|
|||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* HEADER sindikatua */
|
||||||
|
.text-sindikatua {
|
||||||
|
font-family: 'Yaro', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* HEADER ->MENU */
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.menu-bar .dropdown:hover .dropdown-menu {
|
.menu-bar .dropdown:hover .dropdown-menu {
|
||||||
display: block;
|
display: block;
|
||||||
@ -40,9 +45,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* CSS cards 'noticias' */
|
/* PORTADA -> CARDS RECENt POSTS NOTICIAS */
|
||||||
.recent-posts .card-img-overlay,
|
.recent-posts .card-img-overlay {
|
||||||
.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: 25%;
|
height: 25%;
|
||||||
@ -51,6 +55,28 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* PORTADA -> CARDS OPINION */
|
||||||
|
.opinion-article .card-img-overlay {
|
||||||
|
top: auto !important; /* Anula el top: 0 por defecto de Bootstrap */
|
||||||
|
bottom: 0;
|
||||||
|
height: 30%;
|
||||||
|
background: rgba(128, 128, 128, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (991px <= width < 1400px) {
|
||||||
|
.opinion-article .card-img-overlay {
|
||||||
|
height: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width < 990px) {
|
||||||
|
.opinion-article .card-img-overlay {
|
||||||
|
height: 20%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.recent-posts .card-title,
|
.recent-posts .card-title,
|
||||||
.opinion-article .card-title {
|
.opinion-article .card-title {
|
||||||
color: white;
|
color: white;
|
||||||
@ -76,26 +102,59 @@
|
|||||||
color: #E30B16;
|
color: #E30B16;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.secondary-article {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-posts .card.secondary-article .card-title {
|
.recent-posts .card.secondary-article .card-title {
|
||||||
font-size: medium;
|
font-size: medium;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.card-img-overlay {
|
.recent-posts .card-img-overlay {
|
||||||
height: 18%;
|
height: 18%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.recent-posts .card-title {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
.recent-posts .media-mb {
|
||||||
|
margin-bottom: 1rem; /* o el valor que necesites */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* PORTADA -> Titles */
|
||||||
|
.page-portada .sp-module-title::after {
|
||||||
|
background: #cc1d1a;
|
||||||
|
content: "";
|
||||||
|
height: 1px;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -12px;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-portada .sp-module-title::before {
|
||||||
|
background: #cc1d1a;
|
||||||
|
content: "";
|
||||||
|
height: 1px;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -15px;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PORTADA -> SECTION VIDEO */
|
||||||
|
.video-iframe {
|
||||||
|
border-radius: 0.5rem; /* o usa la clase .rounded directamente */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PORTADA -> SECTION CAMPAÑA */
|
||||||
|
.card-img-fixed {
|
||||||
|
max-height: 300px; /* o el valor que necesites */
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FOOTER */
|
||||||
|
|
||||||
/* Convert SVG RRSS white */
|
/* Convert SVG RRSS white */
|
||||||
.svg-white {
|
.svg-white {
|
||||||
filter: brightness(0) invert(1);
|
filter: brightness(0) invert(1);
|
||||||
@ -118,10 +177,4 @@
|
|||||||
|
|
||||||
.svg-hover-white:hover {
|
.svg-hover-white:hover {
|
||||||
filter: brightness(0) invert(1);
|
filter: brightness(0) invert(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* texto header sindikatua */
|
|
||||||
.text-sindikatua {
|
|
||||||
font-family: 'Yaro', Arial, sans-serif;
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -19,8 +19,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- nav -->
|
<!-- nav -->
|
||||||
<div class="row align-items-center justify-content-around container-fluid bg-body-tertiary">
|
<div class="d-flex align-items-center justify-content-around bg-body-tertiary">
|
||||||
<div class="col-7 col-md-10">
|
<div>
|
||||||
<nav class="navbar navbar-expand-lg">
|
<nav class="navbar navbar-expand-lg">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||||
@ -29,10 +29,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-3 col-md-1 mt-2 mt-sm-0">
|
{#<div>
|
||||||
{% include "partials/btn-search.twig" with {'items': menu.get_items} %}
|
{% include "partials/btn-search.twig" with {'items': menu.get_items} %}
|
||||||
</div>
|
</div> #}
|
||||||
<div class="col-2 col-md-1">
|
<div>
|
||||||
{% include "partials/menu-burger.twig" with {'items': menu.get_items} %}
|
{% include "partials/menu-burger.twig" with {'items': menu.get_items} %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -15,17 +15,30 @@
|
|||||||
{% 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 text-light" href="{{ item.link }}" role="button" aria-expanded="false">
|
<a class="nav-link dropdown-toggle text-light"
|
||||||
{{item.title}}</a>
|
{% if item.target %}target="{{ item.target }}"{% endif %}
|
||||||
|
{% if item.xfn %}rel="{{ item.xfn }}"{% endif %}
|
||||||
|
href="{{ item.link }}"
|
||||||
|
role="button"
|
||||||
|
aria-expanded="false">
|
||||||
|
{{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 text-dark" href="{{ subitem.link }}">{{subitem.title}}</a></li>
|
<li><a class="dropdown-item text-dark"
|
||||||
|
{% if subitem.target %}target="{{ subitem.target }}"{% endif %}
|
||||||
|
{% if subitem.xfn %}rel="{{ subitem.xfn }}"{% endif %}
|
||||||
|
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 text-light" href="{{ item.link }}">
|
<a class="nav-link text-light"
|
||||||
|
href="{{ item.link }}"
|
||||||
|
{% if item.xfn %}rel="{{ item.xfn }}"{% endif %}
|
||||||
|
{% if item.target %}target="{{ item.target }}"{% endif %}>
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</a>
|
</a>
|
||||||
{% include 'partials/menu.twig' with {items: item.children} %}
|
{% include 'partials/menu.twig' with {items: item.children} %}
|
||||||
|
|||||||
@ -4,17 +4,32 @@
|
|||||||
{% 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"
|
||||||
{{item.title}}</a>
|
href="{{ item.link }}"
|
||||||
|
role="button"
|
||||||
|
aria-expanded="false"
|
||||||
|
{% if item.xfn %}rel="{{ item.xfn }}"{% endif %}
|
||||||
|
{% if item.target %}target="{{ item.target }}"{% endif %}>
|
||||||
|
{{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"
|
||||||
|
href="{{ subitem.link }}"
|
||||||
|
{% if subitem.xfn %}rel="{{ subitem.xfn }}"{% endif %}
|
||||||
|
{% if subitem.target %}target="{{ subitem.target }}"{% endif %}>
|
||||||
|
{{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"
|
||||||
|
href="{{ item.link }}"
|
||||||
|
{% if item.xfn %}rel="{{ item.xfn }}"{% endif %}
|
||||||
|
{% if item.target %}target="{{ item.target }}"{% endif %}>
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</a>
|
</a>
|
||||||
{% include 'partials/menu.twig' with {items: item.children} %}
|
{% include 'partials/menu.twig' with {items: item.children} %}
|
||||||
|
|||||||
@ -1,48 +1,73 @@
|
|||||||
<section class="py-5">
|
<section class="py-4">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row align-items-center">
|
<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">
|
||||||
<h2 class="mb-4">Últimos Vídeos</h2>
|
<p class="mb-4 position-relative fs-4 fw-bold sp-module-title">VÍDEOS</p>
|
||||||
|
|
||||||
{% if videos_carousel %}
|
{% if videos_carousel %}
|
||||||
<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_carousel|batch(2, null) %}
|
{% for pair in videos_carousel|batch(2, null) %}
|
||||||
<div class="carousel-item {% if loop.first %}active{% endif %}">
|
|
||||||
<div class="row">
|
<div class="carousel-item {% if loop.first %}active{% endif %}">
|
||||||
{% for video in pair %}
|
<div class="row">
|
||||||
{% if video %}
|
{% for video in pair %}
|
||||||
<div class="col-6">
|
{% if video %}
|
||||||
<div class="video-item">
|
<div class="col-6">
|
||||||
{% set url_video = video.meta('url_video') %}
|
<div class="video-item">
|
||||||
{% set video_data = generar_embed(url_video) %}
|
{% 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;">
|
||||||
|
|
||||||
{% if video_data %}
|
{# Overlay con botón play #}
|
||||||
<div class="ratio ratio-1x1">
|
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
|
||||||
<iframe src="{{ video_data.embed_url }}"
|
<div class="btn btn-danger btn-lg rounded-circle d-flex align-items-center justify-content-center"
|
||||||
title="{{ video.titulo }}"
|
style="width: 60px; height: 60px;">
|
||||||
frameborder="0"
|
<i class="bi bi-play-btn" style="font-size: 2rem;"></i>
|
||||||
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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{# Overlay oscuro al hover #}
|
||||||
|
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-0 hover-overlay"
|
||||||
|
style="transition: opacity 0.3s ease;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Título del vídeo #}
|
||||||
|
<div class="position-absolute bottom-0 start-0 end-0 bg-dark bg-opacity-75 text-white p-3 rounded">
|
||||||
|
<h6 class="mb-0 text-white">{{ video.titulo }}</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% else %}
|
||||||
|
<div class="alert alert-warning">
|
||||||
|
<h5>{{ video.titulo }}</h5>
|
||||||
|
<p class="mb-0">No se ha configurado URL para este vídeo.</p>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
</div>
|
||||||
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{# carousel controls buttons#}
|
||||||
{% if videos_carousel|length > 1 %}
|
{% if videos_carousel|length > 1 %}
|
||||||
<button class="carousel-control-prev" type="button" data-bs-target="#videosCarousel" data-bs-slide="prev">
|
<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="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||||
@ -53,45 +78,80 @@
|
|||||||
<span class="visually-hidden">Siguiente</span>
|
<span class="visually-hidden">Siguiente</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="carousel-indicators">
|
{# <div class="carousel-indicators">
|
||||||
{% for pair in videos_carousel|batch(2, null) %}
|
{% for pair in videos_carousel|batch(2, null) %}
|
||||||
<button type="button" data-bs-target="#videosCarousel" data-bs-slide-to="{{ loop.index0 }}"
|
<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>
|
{% if loop.first %}class="active"{% endif %} aria-label="Slide {{ loop.index }}"></button>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div> #}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% else %}
|
{% else %}
|
||||||
<p>No hay vídeos disponibles.</p>
|
<p>No hay vídeos disponibles.</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{# Segunda columna - Último artículo de opinión #}
|
{# MODAL PARA REPRODUCIR VÍDEO #}
|
||||||
<div class="col-lg-4 col-12 opinion-article">
|
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
|
||||||
<h2 class="mb-4">Última Opinión</h2>
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
{% if ultimo_articulo_opinion %}
|
<div class="modal-header">
|
||||||
<div class="h-100">
|
<h5 class="modal-title" id="videoModalLabel"></h5>
|
||||||
{% for article in ultimo_articulo_opinion %}
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
|
||||||
<div class="card secondary-article">
|
</div>
|
||||||
<a href="{{ article.link }}">
|
<div class="modal-body p-0">
|
||||||
<img src="{{ article.thumbnail.src('medium') }}"
|
<div class="ratio ratio-16x9">
|
||||||
alt="{{ article.thumbnail.alt }}"
|
<iframe id="modalVideoIframe"
|
||||||
class="card-img"/>
|
src=""
|
||||||
<div class="card-img-overlay">
|
title=""
|
||||||
<h3 class="card-title text-wrap">
|
frameborder="0"
|
||||||
<a href="{{ article.link }}">{{ article.title }}</a>
|
allow=""
|
||||||
</h3>
|
allowfullscreen
|
||||||
</div>
|
loading="lazy">
|
||||||
</a>
|
</iframe>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
</div>
|
||||||
<p class="text-muted">No hay artículos de opinión disponibles.</p>
|
</div>
|
||||||
{% endif %}
|
|
||||||
|
{# 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -16,6 +16,7 @@
|
|||||||
|
|
||||||
<!-- 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} %}
|
||||||
<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">
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
{% extends 'layouts/base.twig' %}
|
{% extends 'layouts/base.twig' %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
<div class="page-portada">
|
||||||
|
|
||||||
{# Sección noticias #}
|
{# Sección noticias #}
|
||||||
{% if recent_posts_noticias %}
|
{% if recent_posts_noticias %}
|
||||||
@ -25,7 +26,7 @@
|
|||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="d-flex flex-column h-100 justify-content-between">
|
<div class="d-flex flex-column h-100 justify-content-between">
|
||||||
{% for article in recent_posts_noticias[1:3] %}
|
{% for article in recent_posts_noticias[1:3] %}
|
||||||
<div class="card secondary-article">
|
<div class="card secondary-article {% if loop.first %}media-mb{% endif %}">
|
||||||
<a href="{{ article.link }}">
|
<a href="{{ article.link }}">
|
||||||
<img src="{{ article.thumbnail.src('medium') }}"
|
<img src="{{ article.thumbnail.src('medium') }}"
|
||||||
alt="{{ article.thumbnail.alt }}"
|
alt="{{ article.thumbnail.alt }}"
|
||||||
@ -48,6 +49,8 @@
|
|||||||
{# Sección Logos #}
|
{# Sección Logos #}
|
||||||
{% if botones_imagen %}
|
{% if botones_imagen %}
|
||||||
<section class="custom-buttons-section my-5">
|
<section class="custom-buttons-section my-5">
|
||||||
|
<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">
|
||||||
@ -66,9 +69,57 @@
|
|||||||
{% include 'partials/section-videos.twig' %}
|
{% include 'partials/section-videos.twig' %}
|
||||||
|
|
||||||
{# Sección Campañas / conlfictos #}
|
{# Sección Campañas / conlfictos #}
|
||||||
<h2> Sección Campañas / conflictos</h2>
|
<section class="recent-posts py-4">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{% 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>
|
||||||
|
{% 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>
|
||||||
|
|
||||||
|
{% 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>
|
||||||
|
{% else %}
|
||||||
|
<h2>no hay artículos</h2>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user