¿Es posible cambiar el fondo de un plug in lightbox?  

@pepesoler Lo estoy comprobando en mi portátil, sí. ¿Se puede ajustar en ambos?

Gracias.

Hola Jose Miguel.

¿Se puede ajustar en ambos?

perdoname pero no se que quieres decir.

Esto es lo que veo en la versión PC:

No se que quieres ajustar 🤔 

Un saludo

Hola, @pepesoler! Vaya, en tu captura de pantalla se ve como a mí me gustaría, me sucede que en escritorio las imágenes grandes ocupan toda la altura de la pantalla, me gustaría que tuviesen margen arriba y abajo, como sucede con las horizontales a los lados.

Mira cómo lo veo yo en mi pantalla de escritorio (en https://jotabarros.com/galerias/mar-a-babor/):

En móvil me encanta cómo se ve, con margen alrededor. Gracias por eso!

Hola, José Miguel

He revisado los márgenes superior e inferior de la galería y los veo correctamente en la versión escritorio (no móvil), tal como te muestro en el siguiente vídeo.

Debes tener en cuenta que para que dichas imágenes muestren un margen establecido por CSS, estás deben tener tamaños proporcionales, y todas el mismo, si son verticales u horizontales, ya que de lo contrario, el navegador tratará de aplicar su propio método de renderizado a las imágenes para adaptarlas a la pantalla donde se estén visualizando.

¿Puedes indicar qué plugin estás utilizando para las imágenes?, ten en cuenta que este tipo de "hacks" requieren modificación de código, ya que no todo se consigue 100% modificando CSS.

Además, modificar estilos CSS que cargan inicialmente en tu web puede provocar un efecto flashing o FOUC que va a afectar al CLS de tu sitio, en las métricas de optimización, y eso a Google no le suele gustar.

Quedo pendiente de tu respuesta.

Gracias, @alejo ! Estoy usando Lightbox for Gallery & Image Block de Johannes Kinast

Entiendo que lo que hemos hecho hasta ahora no afecta negativamente, ¿cierto? No entiendo por qué sigo viendo las imágenes verticales pegadas al borde superior e inferior en escritorio, pero si va a suponer un problema seguir intentándolo lo dejamos aquí. 🙂

Hola, José Miguel

Tras analizar el plugin en una instalación de pruebas, he podido ver que en esencia funciona mediante una librería JavaScript que es la que gestiona la carga de imágenes y aplica los efectos de "lightbox" etc.

Prueba a editar el estilo CSS #baguetteBox-overlay .full-image img desde Apariencia > Personalizar > CSS personalizado y baja los valores siguientes que están declarados al 100% al 90%

max-height: 90%;
max-width: 90%;

Guarda los cambios, limpia la caché y verifica si se aplican los márgenes.

Lo correcto sería analizar a fondo el archivo baguetteBox.js y ver cómo pinta en pantalla las imágenes para aplicar los cambios de forma correcta, ya que de esta forma añadirías menos CSS personalizado, reducirían el tamaño del DOM y afectarían menos al CLS entre otras cosas.

No obstante, hacer cambios de JS requiere conocimientos de JavaScript y se sale del contexto de soporte de este Foro.

@alejo gracias! Revisaré las alturas de las imágenes y veré cómo queda. Un abrazo.

Jota.

Hola Jota.

Ok, dejo el hilo abierto por si necesitas retomarlo.

Un saludo