Este componente de tema insere botões na barra de ferramentas do compositor de posts para alinhar imagens carregadas com o texto à esquerda ou à direita, centralizadas no post, ou para alinhar várias imagens em uma grade, usando as tags de grade recém-implementadas. A grade dimensionará automaticamente as imagens para caber dependendo de quantas e de suas dimensões, e também vinculará às versões carregadas maiores. Os botões / funções de alinhamento podem ser usados várias vezes em um post para criar uma variedade de layouts. Funciona para visualizações de desktop e mobile.
Para usar, basta clicar no botão de alinhamento de imagem que você precisa e, em seguida, carregar imagens no local designado entre as tags resultantes (marcadas por texto placeholder que pode ser editado nas configurações do componente).
Note que a parte da grade deste componente é para alinhar imagens carregadas, não links de imagem (as outras opções de alinhamento funcionarão para imagens de link). Eu peguei parte da estrutura básica do código do útil componente MD Composer Extras do @Steven.
A fazer: adicionar seletores de ícones adequados para cada botão.
Capturas de tela
botão de grade da barra de ferramentas do compositor (com exemplo de código de grade)
você quer dizer o composer / editor com a barra de ferramentas? essa seria a primeira captura de tela com o exemplo da grade. adicionarei algumas capturas de tela do editor com os outros códigos de alinhamento em torno das imagens.
De nada. Como você faz para que o “Align left”, por exemplo, mostre um texto em negrito em suas capturas de tela? Tentei markdown e ele está mostrando o código markdown.
Vejo que funciona com ###, mas o negrito padrão com
insira apenas algumas tags html <br><br> entre o primeiro bloco de texto e a tag <div>-data-theme... até que o espaçamento fique correto. Tentarei programar um retorno forçado ou algo assim quando tiver tempo.
Sim, eu também não gosto desse método. Eu estava pensando em talvez tentar uma solução de propriedade de espaço em branco. no final, funciona melhor se as imagens alinhadas forem posts separados. Infelizmente, imagens em tabelas também não funcionam muito bem.
Tentei essas soluções de propriedade flex align, mas não consegui chegar a algo consistentemente funcional. Encontrei uma solução alternativa utilizável, no entanto. Se você transformar cada seção de imagem e texto em uma citação em bloco, isso os separará (mas incluirá a formatação de citação para o texto):
no final, funciona melhor se as imagens alinhadas forem posts separados. Infelizmente, imagens em tabelas também não funcionam muito bem.
.
