Mova a galeria de legendas para as imagens abaixo

Eu não posso fornecer um link porque este site é apenas local agora, mas o problema é fácil de reproduzir. A partir de WP 5.0, títulos de galeria estão agora no topo das imagens da galeria. Se você tem um título com muitas linhas de texto, os cabeçalhos cobrem a imagem em telas menores, então é impossível clicar no hiperlink de imagem para definir a imagem em tamanho real ou a outra página como um link personalizado. Isso até acontece com os temas padrão.

As etiquetas de “figcaption” parecem estar carregadas dentro das etiquetas “figura” para a imagem principal, então suspeito que o melhor arranjo é mover a figcapção para longe do rótulo da figura, mas mantê-la dentro do item da lista.

Uma pergunta sobre isso começou o Github.

Em WP 5.x, qual é a melhor maneira de mover títulos de galeria para um local abaixo da imagem associada como estavam em WP 4.9.x?

Você precisa ter algumas regras adicionais de CSS para fazer isso acontecer em seu tema.

O elemento é: flex é exibido. Você quer trocar isso por outra coisa, como um bloco online ou algo assim..wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure

Em segundo lugar, este elemento ele tem a posição: cheio disso. Você vai querer mudar isso para um relacionamento..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

Isso adicionará os títulos abaixo de todas as imagens por conta própria. No entanto, um gradiente de fundo é adicionado para melhor se encaixar na imagem. Você vai querer ajustar a cor: e o plano de fundo – as configurações da figura para corrigir isso.

Obrigado pela ajuda e pela resposta rápida. Na verdade, eu pensei que teria que usar um gancho ou um filtro para ele, mas com a sua sugestão eu fui capaz de criar o CSS em seguida. 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;
}

Eu refinei 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;
}

Obrigado! Isso funciona em duas e três colunas, mas com duas colunas as miniaturas permanecem em 270px.

Eu tenho várias galerias em planejamento e um dado exibido claro e título é crucial, então obrigado novamente ?

Olá

Quando útil, aqui está como eu movi as legendas sob as imagens na minha galeria no novo editor de blocos:

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

Então, você pode aplicar qualquer outro estilo ao título que melhor lhe convém. Ele parece ter feito o truque.

Obrigado @jossoway

Funcionou comigo também.

John, explique onde coloquei seu código.

Além disso, estou ligando meus polegares a outra página onde um vídeo pode ser reproduzido. Coloquei o link na área da legenda, mas é claro que o link é exibido sobre o polegar. Como posso conectar um link quando ele não é visível? Eu não me importo se o título é exibido acima do polegar, mas seria bom.

Olá, CSS vai para o meu exemplo na folha de estilo do seu tema, e você deve substituir os estilos padrão de legendas da galeria wordpress.

Não sei se entendo a outra pergunta, infelizmente. Quer dizer que não quer vincular imagens na galeria a versões maiores das imagens, mas a outra coisa?

Estou procurando uma maneira de ter uma galeria de miniaturas onde cada miniatura está ligada a uma página que só tem um vídeo dessa miniatura.

O bloco Ainda conectado na coluna direita tem a opção de selecionar Link/URL personalizado, que é o que eu quero. A galeria seria mais fácil.

Você pode sugerir um?

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

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

Plugin de link de galeria personalizado

O código Linux4me2 funcionou para mim. Removi o código João O das minhas imagens e só tinha como legendas. ??

Como reduzir o espaço entre imagens com a galeria padrão do WordPress?
https://www.hardy.global/alvandenberg/?page_id=41

@jossoway a solução de legendagem da sua galeria funcionou para mim, mas como em qualquer artigo de bloco wp, tive que usar importante várias vezes. Sei que é errado, mas não encontrei outra opção. Algum conselho sobre isso?

Esta resposta foi modificada há 11 meses, há 3 semanas.

Oi @jossoway, (errado) usei seu código para suprimir legendas completamente. embora de forma muito bruta, definindo um tamanho de fonte: 0px; Qual seria a maneira mais apropriada de fazer isso? Não sei como encontrar todos os parâmetros possíveis na documentação de itens de figcaption .blocks-gallery.. Pode me guiar até a documentação correta?

obrigado, geb

Isto foi útil?

0 / 0

Deixe um comentário 0

Your email address will not be published. Required fields are marked *