Un usuario preguntó 👇
Básicamente busqué soluciones personalizadas que podría tener aquí: onepress light box para galerías de WordPress
en el tema Onepress.js usando lightgallery – v1.3.9 – 2017-02-05
if ($.fn.lightGallery) {
var wrap_tag = $(".enable-lightbox", $context).find('.g-item').first();
var tag_selector = 'a';
if( wrap_tag.is( 'div' ) ){
tag_selector = 'div';
}
$(".enable-lightbox", $context).lightGallery({
mode: "lg-fade",
selector: tag_selector
//cssEasing : 'cubic-bezier(0.25, 0, 0.25, 1)'
});
}Ejemplo de código de salida de Onepress en la página de inicio:
<div class="gallery-content">
<div class="gallery-grid g-zoom-in enable-lightbox g-col-3">
<a class="g-item" title="A" href="/wp-content/uploads/a.jpg">
<span class="inner">
<span class="inner-content">
<img src="/wp-content/uploads/a-480x300.jpg" alt="a" />
</span>
</span>
</a>
<a class="g-item" title="b" href="/wp-content/uploads/b.jpg">
<span class="inner">
<span class="inner-content">
<img src="/wp-content/uploads/b-480x300.jpg" alt="b" />
</span>
</span>
</a>
</div>
</div>Código de salida de muestra de WordPress Block Gallery
<figure class="wp-block-gallery columns-3 is-cropped">
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item">
<figure>
<a href="/wp-content/uploads/a.jpg">
<img class="wp-image-117" src="/wp-content/uploads/a.jpg-1024x682.jpg" alt="a" data-id="117" data-full-url="/wp-content/uploads/a.jpg" data-link="/wp-content/uploads/a.jpg" />
</a>
<figcaption class="blocks-gallery-item__caption">
a
</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<a href="/wp-content/uploads/b.jpg">
<img class="wp-image-124" src="/wp-content/uploads/b-1024x640.jpg" sizes="(max-width: 1024px) 100vw, 1024px" srcset="/wp-content/uploads/b-1024x640.jpg 1024w, /wp-content/uploads/b-300x188.jpg 300w, /wp-content/uploads/b-768x480.jpg 768w, /wp-content/uploads/b-1536x960.jpg 1536w, /wp-content/uploads/b-480x300.jpg 480w, /wp-content/uploads/b-640x400.jpg 640w, /wp-content/uploads/b.jpg 1800w" alt="b" data-id="124" data-full-url="/wp-content/uploads/b" data-link="/gallery/b/" />
</a>
<figcaption class="blocks-gallery-item__caption">
b
</figcaption>
</figure>
</li>
</ul>
</figure>WP 5.2+ Código de salida de muestra Gutenberg Block Image
<figure class="wp-block-image size-large"><a href="https://wp1803.roc.bz/wp-content/uploads/2019/12/things2_1280.jpg"><img src="https://wp1803.roc.bz/wp-content/uploads/2019/12/things2_1280-1024x576.jpg" alt="" class="wp-image-8" srcset="https://wp1803.roc.bz/wp-content/uploads/2019/12/things2_1280-1024x576.jpg 1024w, https://wp1803.roc.bz/wp-content/uploads/2019/12/things2_1280-300x169.jpg 300w, https://wp1803.roc.bz/wp-content/uploads/2019/12/things2_1280-768x432.jpg 768w, https://wp1803.roc.bz/wp-content/uploads/2019/12/things2_1280.jpg 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
No tengo las habilidades para codificar php o js desde cero, así que busqué posibles soluciones para lograr una caja de luz que funcione para galerías e imágenes en publicaciones y páginas.
A1) Carpeta alrededor de la Galería e Imágenes:
+ enable-lightbox CSS class para la galería y el bloque de imágenes. Vista simple: isitwp.com/automatically-wrap-images-in-the_content-with-custom-html, Inicio fin: wordpress.stackexchange.com/questions/279861/wrap-a-span-tag-around-authors-post-count
No pude encontrar un ejemplo que se adhiriera al principio y al final de la etiqueta, ya que este código seleccionará todos los finales de FIGURA:
function filter_figure($content){
return preg_replace('<figure class="wp-block-gallery', '<div class="gallery-content"><figure class="wp-block-gallery enable-lightbox', $content);
return preg_replace('figure class="wp-block-image', '<div class="gallery-content">figure class="wp-block-image enable-lightbox', $content);
return preg_replace('</figure>', '</figure></div>', $content);
}
add_filter('the_content', 'filter_figure');A2) Bloque de carpetas – ver github.com/liip/wrapper-block-example-wp-plugin
No he probado esto ya que depende de eliminar manualmente este elemento para cada galería / imagen; el uso de código HTML personalizado podría lograr lo mismo (se necesita más codificación mano)
B) Guión del tema infantil – ver sachinchoolur.github.io/lightGallery/demos/html-markup.html
functions.php
function my_themechild_js() {
wp_enqueue_script( 'themechild-js', get_stylesheet_directory_uri() . '/scripts.js', array( 'jquery' ),'1.0',true );
}
add_action( 'wp_enqueue_scripts', 'my_themechild_js' );scripts.js
$('.wp-block-gallery').lightGallery({
selector: 'a'
});
$('.wp-block-image').lightGallery({
selector: 'a'
});No parece funcionar.
Si alguien pudiera ayudarme a aplicar una caja de luz de Onepress a galerías / publicar imágenes / páginas, ¡sería genial! En mi humilde opinión, ruta B) JS parece ser más limpio (menos código, tiempo de satisfacción) y más fácil
Este tema fue modificado hace un año por.
(@longnguyen)
hace 1 año
Esta respuesta fue modificada hace 1 año por.
(@chrisfo)
Hace 12 meses
@longnguyen, ¿tu publicación parece estar (accidentalmente) vacía?
(@longnguyen)
Hace 12 meses
Hola @chrisfo
Primero, el tema de OnePress que está utilizando tiene una versión anterior, actualice a la última versión 2.2.4 para obtener las nuevas funciones, corregir un error …
Luego puede usar otra imagen de caja de luz de plugin para mostrar las publicaciones / páginas https://wordpress.org/plugins/responsive-lightbox/
Acerca de.
(@chrisfo)
Hace 11 meses, 2 semanas
Hola @longnguyen Estoy usando Onepress Versión 2.2.4 – el lightware parece estar incluido v1.3.9
Me gustaría usar otros plugins de imagen de caja de luz para trabajar en galerías / imágenes en publicaciones / páginas debido a: a) consistencia de caja de luz (no tener solo dos páginas web) b) plugin adicional que no es esencialmente necesario evitar (actualización requerida, compatibilidad de posibles problemas) c) evitar una huella más pesada (cargar scripts adicionales, etc.)
La codificación personalizada de bloques de Gutenberg para imágenes y galería probablemente sería una solución personal (como se dijo, no puedo codificar desde cero). Definitivamente la mejor solución si Onepress pudiera admitir una caja de luz para imágenes / galerías (como una opción) 🙂
¿Solucionó tu problema??
0 / 0