diff --git a/assets/scripts/site.js b/assets/scripts/site.js index 6655bd0..4e3f0f7 100644 --- a/assets/scripts/site.js +++ b/assets/scripts/site.js @@ -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 = ''; + }); }); \ No newline at end of file diff --git a/src/StarterSite.php b/src/StarterSite.php index 5d92891..4743a13 100644 --- a/src/StarterSite.php +++ b/src/StarterSite.php @@ -31,9 +31,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_youtube_function_to_twig']); - add_filter('timber/twig', [$this, 'add_videos_embed_to_twig']); - + add_filter('timber/twig', [$this, 'add_videos_embed_to_twig']); //videos embed 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( '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( '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; } + /** + * New functions to add Sindikatua theme + * @author Gustavo + */ + //add svg files public function add_svg_support($file_types) { $new_filetypes = array(); @@ -229,6 +232,7 @@ class StarterSite extends Site { private function getIconsRRSS() { $icons_rrss = []; + for ($i = 1; $i <= 4; $i++) { $img = get_field('rrss_img_' . $i, 'option'); $url = get_field('rrss_url_' . $i, 'option'); @@ -246,7 +250,7 @@ class StarterSite extends Site { private function getLogosHeader ($max_logos = 2) { $logos = []; - + for ($i = 1; $i <= $max_logos; $i++) { $logoHeader = get_field('logo_header_' . $i, 'option'); $textoHeader = get_field('texto_header_' . $i, 'option'); @@ -260,13 +264,12 @@ class StarterSite extends Site { } return $logos; - } - private function getVideosCarousel($cantidad = 2) { + private function getVideosCarousel() { return Timber::get_posts([ 'post_type' => 'videos', - 'posts_per_page' => $cantidad, + 'posts_per_page' => -1, // -1 = sin límite 'post_status' => 'publish', 'orderby' => 'date', 'order' => 'DESC' @@ -283,17 +286,15 @@ class StarterSite extends Site { ]); } - // Añadir en functions.php si no la tienes ya - // private function obtener_youtube_id($url) { - // $pattern = '/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/'; - // preg_match($pattern, $url, $matches); - // return isset($matches[1]) ? $matches[1] : false; - // } - - // public function add_youtube_function_to_twig($twig) { - // $twig->addFunction(new \Twig\TwigFunction('youtube_id', [$this, 'obtener_youtube_id'])); - // return $twig; - // } + private function getCampanaArticles() { + return Timber::get_posts([ + 'post_type' => 'campana', + 'posts_per_page' => 1, + 'post_status' => 'publish', + 'orderby' => 'date', + 'order' => 'DESC' + ]); + } public function generar_embed_universal($url) { if (empty($url)) { @@ -304,12 +305,13 @@ class StarterSite extends Site { if (strpos($url, 'youtube.com') !== false || strpos($url, 'youtu.be') !== false) { //error_log('es un vídeo de youtube'); // Debug preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/', $url, $matches); - + if (!empty($matches[1])) { $embed_data = [ 'platform' => 'youtube', 'embed_url' => 'https://www.youtube.com/embed/' . $matches[1] . '?rel=0&modestbranding=1', - 'allow' => 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' + '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']); @@ -357,6 +359,7 @@ class StarterSite extends Site { $context['logos_header'] = $this->getLogosHeader(); $context['videos_carousel'] = $this->getVideosCarousel(); $context['ultimo_articulo_opinion'] = $this->getUltimoArticuloOpinion(); + $context['posts_campana'] = $this->getCampanaArticles(); return $context; } diff --git a/style.css b/style.css index 053c7b6..7c21d22 100644 --- a/style.css +++ b/style.css @@ -11,7 +11,12 @@ font-display: swap; } +/* HEADER sindikatua */ +.text-sindikatua { + font-family: 'Yaro', Arial, sans-serif; +} +/* HEADER ->MENU */ @media (min-width: 992px) { .menu-bar .dropdown:hover .dropdown-menu { display: block; @@ -40,9 +45,8 @@ } -/* CSS cards 'noticias' */ -.recent-posts .card-img-overlay, -.opinion-article .card-img-overlay { +/* PORTADA -> CARDS RECENt POSTS NOTICIAS */ +.recent-posts .card-img-overlay { top: auto !important; /* Anula el top: 0 por defecto de Bootstrap */ bottom: 0; height: 25%; @@ -51,6 +55,28 @@ 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, .opinion-article .card-title { color: white; @@ -76,26 +102,59 @@ color: #E30B16; } -.card.secondary-article { - height: auto; -} - .recent-posts .card.secondary-article .card-title { font-size: medium; } - -/* Responsive */ @media (max-width: 768px) { - .card-img-overlay { + .recent-posts .card-img-overlay { height: 18%; } - .card-title { + .recent-posts .card-title { 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 */ .svg-white { filter: brightness(0) invert(1); @@ -118,10 +177,4 @@ .svg-hover-white:hover { filter: brightness(0) invert(1); -} - -/* texto header sindikatua */ -.text-sindikatua { - font-family: 'Yaro', Arial, sans-serif; - -} +} \ No newline at end of file diff --git a/views/partials/section-videos.twig b/views/partials/section-videos.twig index a5e4a72..96a8c1c 100644 --- a/views/partials/section-videos.twig +++ b/views/partials/section-videos.twig @@ -1,48 +1,73 @@ -
+
-
+
{# Primera columna - Carousel con vídeos embebidos #}
-

Últimos Vídeos

+

VÍDEOS

{% if videos_carousel %}
+
\ No newline at end of file diff --git a/views/templates/page-portada.twig b/views/templates/page-portada.twig index 15fd7a0..925fbaf 100644 --- a/views/templates/page-portada.twig +++ b/views/templates/page-portada.twig @@ -1,5 +1,6 @@ {% extends 'layouts/base.twig' %} {% block content %} +
{# Sección noticias #} {% if recent_posts_noticias %} @@ -25,7 +26,7 @@
{% for article in recent_posts_noticias[1:3] %} -
+
{{ article.thumbnail.alt }} +

ENLACES

+
{% for boton in botones_imagen %}
@@ -66,9 +69,57 @@ {% include 'partials/section-videos.twig' %} {# Sección Campañas / conlfictos #} -

Sección Campañas / conflictos

+
+
+
+ + {% if posts_campana %} +
+

CAMPAÑAS

+ + {% set main_article = posts_campana[0] %} +
+ + {{ main_article.thumbnail.alt }} +
+

+ {{ main_article.title }} +

+
+
+
+ {% else %} +

no hay artículos

+ {% endif %} + + {% if posts_campana %} +
+

CONFLICTOS LABORALES

+ + {% set main_article = posts_campana[0] %} +
+ + {{ main_article.thumbnail.alt }} +
+

+ {{ main_article.title }} +

+
+
+
+ {% else %} +

no hay artículos

+ {% endif %} +
+
+
+
{% endblock %} \ No newline at end of file