Pregunta sobre Arreglando WordPress de Wordpress:

Mover la galería de subtítulos a las imágenes de abajo

Un usuario preguntó 👇

No puedo proporcionar un enlace porque este sitio solo es local en este momento, pero el problema es fácil de reproducir. A partir de WP 5.0, los títulos de la galería ahora están en la parte superior de las imágenes de la galería. Si tiene un título con muchas líneas de texto, los encabezados cubren la imagen en pantallas más pequeñas, por lo que es imposible hacer clic en el hipervínculo de la imagen para establecer la imagen de tamaño completo o la otra página como un enlace personalizado. Esto incluso sucede con los temas predeterminados.

Las etiquetas «figcaption» parecen estar cargadas dentro de las etiquetas «figure» para la imagen principal, por lo que sospecho que la mejor disposición es alejar la figcaption de la etiqueta de la figura pero mantenerla dentro del elemento de la lista.

Ha comenzado una pregunta al respecto Github.

En WP 5.x, ¿cuál es la mejor manera de mover los títulos de la galería a una ubicación debajo de la imagen asociada como estaban en WP 4.9.x?

(@ otto42)

Administración de WordPress.org

Hace 1 año, 12 meses

Necesita tener algunas reglas CSS adicionales para que esto suceda en su tema.

El es .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure elemento: se muestra flex. Quieres cambiar eso por otra cosa, como un bloque en línea o algo así.

En segundo lugar, este elemento .entry .entry-content .wp-block-audio figcaption, .entry .entry-content .wp-block-video figcaption, .entry .entry-content .wp-block-image figcaption, .entry .entry-content .wp-block-gallery .blocks-gallery-image figcaption, .entry .entry-content .wp-block-gallery .blocks-gallery-item figcaption él tiene la posición: lleno de eso. Querrás cambiar eso a una relación.

Esto agregará los títulos debajo de todas las imágenes por sí solo. Sin embargo, se agrega un degradado de fondo para que se ajusten mejor a la imagen. Querrá ajustar el color: y el fondo: la configuración de la figura para corregir esto.

(@ linux4me2)

Hace 1 año, 12 meses

Gracias por la ayuda y la rápida respuesta. De hecho, pensé que tendría que usar un gancho o un filtro para ello, pero con tu sugerencia pude crear el CSS a continuación. No es perfecto, pero es un buen comienzo;


/* Add multi-line by line breaks to Gutenberg galleries. */
.blocks-gallery-item figcaption {
	white-space: pre-line;
	color: #555 !important;
}

/* Prevent the last image from growing to fill available space if there aren't enough images in a row. */
.blocks-gallery-item {
	flex-grow: 0 !important;
	display: inline-block !important;
}

.wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure {
	display: inline-block;
	height: 70%;
	padding: 5px 0 25px 0;
}

.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption {
	position: relative;
	background: none;
	margin: 0 0 15px 0;
	padding: 0;
}

(@ linux4me2)

Hace 1 año, 11 meses

He refinado el CSS anterior para que funcione un poco mejor:


/* Add multi-line by line breaks to Gutenberg galleries. */
.blocks-gallery-item figcaption {
	white-space: pre-line;
	color: #555 !important;
}

/* Prevent the last image from growing to fill available space if there aren't three images in a row. */
.blocks-gallery-item {
	flex-grow: 0 !important;
	display: inline-block !important;
}

.wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure {
	display: inline-block;
	height: auto;
	padding: 5px 0;
}

.wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img {
	height: 270px;
}	

.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption {
	position: relative;
	background: none;
	margin: 10px 0 15px 0;
	padding: 0;
}

(@mdebruce)

Hace 1 año, 11 meses

¡Gracias! Esto funciona en dos y tres columnas, pero con dos columnas las miniaturas permanecen en 270px.

Tengo varias galerías en planificación y una fecha y un título claramente mostrados es crucial, así que gracias de nuevo 🙂

(@jossoway)

Hace 1 año, 9 meses

Hola,

Cuando sea útil, así es como moví los subtítulos debajo de las imágenes de mi galería en el nuevo editor de bloques:

// Gallery captions

.wp-block-gallery .blocks-gallery-item figure {
    flex-direction: column;
}

.wp-block-gallery .blocks-gallery-item figcaption {
    position: relative;
    bottom: auto;
    width: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 10px 0 20px 0;
    color: #333;
    text-align: center;
    font-size: 13px;
    background: linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,0) 0%,transparent);
}

Luego, puede aplicar cualquier otro estilo al título que más le convenga. Parece haber hecho el truco.

(@ wph4)

Hace 1 año, 8 meses

Gracias @jossoway

A mí también me sirvió.

(@rfendelman)

Hace 1 año, 6 meses

John, explica dónde puse tu código.

Además, estoy vinculando los pulgares a otra página donde se puede reproducir un video. Puse el enlace en el área de subtítulos, pero, por supuesto, el enlace se muestra sobre el pulgar. ¿Cómo puedo conectar un enlace cuando no está visible? No me importa si el título se muestra por encima del pulgar, pero sería bueno.

(@jossoway)

Hace 1 año, 6 meses

Hola, CSS va por mi ejemplo en la hoja de estilo de su tema, y ​​debería anular los estilos predeterminados de subtítulos de la galería de WordPress.

No estoy seguro de entender la otra pregunta, por desgracia. ¿Quiere decir que no desea vincular imágenes de la galería a versiones más grandes de las imágenes, sino a otra cosa?

(@rfendelman)

Hace 1 año, 6 meses

Estoy buscando una manera de tener una galería de miniaturas en la que cada miniatura se vincule a una página que solo tenga un video de esa miniatura.

El plugin Block Still en la columna de la derecha tiene una opción para seleccionar Enlace / URL personalizada, que es lo que quiero. La galería sería más fácil.

¿Puede sugerir uno?

(@jossoway)

Hace 1 año, 6 meses

Conozco personas que recomiendan NextGen Gallery para WordPress, pero yo no la he usado. Lamento no poder ofrecer más ayuda aquí.

(@jossoway)

Hace 1 año, 5 meses

Le pregunté a algunas personas que conozco que, fuera del trabajo de desarrollo personalizado, sugirieron esto, aunque no lo usé yo mismo:

Plugin de enlaces personalizados de la galería

(@ sp12)

Hace 1 año, 3 meses

El código Linux4me2 funcionó para mí. Eliminé el código John O de mis imágenes y solo tenía los subtítulos. 🙁?

(@ indigojones66)

Hace 1 año, 3 meses

¿Cómo reduzco el espacio entre imágenes con la galería predeterminada de WordPress?
https://www.hardy.global/alvandenberg/?page_id=41

(@robotcompendium)

Hace 11 meses, 3 semanas

@jossoway La solución de subtítulos de tu galería funcionó para mí, pero como con cualquier sobrescritura de artículos de block-wp, tuve que usar importante una y otra vez. Sé que está mal pero no he encontrado otra opción. ¿Algún consejo sobre eso?

Esta respuesta fue modificada hace 11 meses, 3 semanas por.

(@gebseng)

hace 7 meses

Hola @jossoway, (mal) usé tu código para suprimir los subtítulos por completo. aunque de una manera muy cruda, estableciendo un tamaño de fuente: 0px; ¿Cuál sería una forma más apropiada de hacer esto? No estoy seguro de cómo puedo encontrar todos los parámetros posibles en la documentación de figcaption .blocks-gallery-item. ¿Puede guiarme hacia la documentación correcta?

gracias, geb

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *