Pergunta sobre como reparar o WordPress WordPress: mova a galeria de legendas nas seguintes imagens

Um usuário perguntou ?

Não posso fornecer um link, pois este site é apenas local no momento, mas o problema é fácil de reproduzir. A partir do WP 5.0, os títulos das galerias agora estão no topo das imagens da galeria. Se você tiver um título com muitas linhas de texto, os títulos cobrirão a imagem em telas menores, impossibilitando clicar no hiperlink da imagem para definir a imagem em tamanho real ou outra página como um link personalizado. . Isso também acontece com os temas padrão.

As tags “figcaption” parecem ser carregadas dentro das tags “figure” na imagem principal, então suspeito que a melhor solução seja mover a figcaption para longe da tag figure, mas mantê-la dentro do item da lista.

Uma pergunta começou Github.

No WP 5.x, qual é a melhor maneira de mover os títulos da galeria para uma posição abaixo da imagem associada, como no WP 4.9.x?

(@otto42)

Administração do WordPress.org

1 ano, 12 meses atrás

Você precisa ter algumas regras CSS adicionais para que isso aconteça com o seu tema.

ele é .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure elemento: flex é mostrado. Você deseja alterá-lo para outra coisa, como uma cadeia de blogs online ou algo assim.

Em 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 tem a carga: cheia. Você quer mudar isso em um relacionamento.

Isso adicionará os títulos em todas as imagens por si só. No entanto, um gradiente de fundo é adicionado para melhor ajustar a imagem. Você deseja ajustar as configurações de cor: e fundo: figura para corrigi-lo.

(@linux4me2)

1 ano, 12 meses atrás

Obrigado pela ajuda e pela resposta rápida. Na verdade, achei que deveria usar um gancho ou filtro para isso, mas com sua sugestão consegui criar o CSS abaixo. Não é perfeito, mas é um bom começo;


/* 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)

1 ano, 11 meses atrás

Eu aperfeiçoei o CSS acima para fazê-lo funcionar um pouco melhor:


/* 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)

1 ano, 11 meses atrás

Obrigada! Funciona em duas e três colunas, mas com duas colunas as miniaturas são mantidas em 270 pixels.

Tenho várias galerias planejadas e uma data e um título claramente definidos são cruciais, então obrigado novamente ?

(@josoway)

1 ano, 9 meses atrás

Olá

Quando útil, veja como movi as legendas abaixo das imagens na minha galeria no novo editor de blog:

// 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);
}

Você pode então aplicar qualquer outro estilo ao título que melhor lhe convier. Parece que deu certo.

(@wph4)

1 ano, 8 meses atrás

Obrigado @jossoway

Também me ajudou.

(@rfendelman)

1 ano, 6 meses atrás

John, explique onde coloquei seu código.

Além disso, estou vinculando meus polegares a outra página onde um vídeo pode ser reproduzido. Eu coloquei o link na área de legendas, mas obviamente o link é mostrado no polegar. Como você conecta um link quando ele não está visível? Eu não me importo se o título estiver acima do polegar, mas tudo bem.

(@josoway)

1 ano, 6 meses atrás

Oi, CSS é meu exemplo na folha de temas do seu tema e deve substituir os estilos de legenda padrão na sua galeria do WordPress.

Não tenho certeza se entendi a outra pergunta, infelizmente. Isso significa que você não deseja vincular as imagens da galeria a versões maiores das imagens, mas a outra coisa?

(@rfendelman)

1 ano, 6 meses atrás

Estou procurando uma maneira de ter uma galeria de miniaturas onde cada miniatura esteja vinculada a uma página que tenha apenas um vídeo dessa miniatura.

O plugin Block Still na coluna da direita tem a opção de selecionar Custom Link/URL, que é o que eu quero. O túnel seria mais fácil.

Você pode sugerir um?

(@josoway)

1 ano, 6 meses atrás

Conheço pessoas que recomendam a Galeria NextGen para WordPress, mas não a usei. Lamento não poder oferecer mais ajuda aqui.

(@josoway)

1 ano, 5 meses atrás

Perguntei a algumas pessoas que conheço que, fora do trabalho de desenvolvimento personalizado, me sugeriram, embora eu não tenha usado:

Conector de link de galeria personalizado

(@sp12)

1 ano, 3 meses atrás

O código Linux4me2 funcionou para mim. Eu removi o código John O das minhas imagens e só tinha as legendas. ?

(@indigojones66)

1 ano, 3 meses atrás

Como posso reduzir o espaço entre imagens com a galeria padrão do WordPress?

(@robotcompendi)

11 meses, 3 semanas atrás

@jossoway A solução de legendagem para sua galeria funcionou para mim, mas, como em qualquer substituição de artigo do blog-wp, tive que usar importante repetidamente. Eu sei que está errado, mas não encontrei outra opção. Algum conselho sobre isso?

Esta resposta foi modificada 11 meses, 3 semanas atrás por.

(@gebseng)

7 meses atrás

Oi @jossoway, eu abusei do seu código para remover completamente as legendas. ainda que de forma muito grosseira, definindo um tamanho de fonte: 0px; Que melhor maneira de fazê-lo? Não tenho certeza de como posso encontrar todos os parâmetros possíveis na documentação figcaption .blocks-gallery-item. Você pode me guiar para a documentação correta?

obrigado, geb

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *