Início / user-842381

vespino's questions

Martin Hope
vespino
Asked: 2025-04-09 15:14:50 +0800 CST
  • 8

Usando o código a seguir, estou tentando adicionar algum CSS ao editor Gutenberg padrão no Wordpress:

function editor_style() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'editor_style' );

Embora isso funcione, também faz o editor parecer estranho:

insira a descrição da imagem aqui

Parece que todos os estilos foram removidos, exceto os da minha folha de estilos personalizada. Isso é intencional? Estou usando Bootstrap no meu tema. Devo incluir isso aqui também?

Martin Hope
vespino
Asked: 2025-04-09 14:17:16 +0800 CST
  • 5

Estou usando o seguinte código para criar um álbum (dentro do WordPress, mas para este exemplo isso é irrelevante):

É assim que acontece:

insira a descrição da imagem aqui

O que eu esperava fazer é que as imagens da última linha sempre se estendessem por essa linha. Assim, quando houver apenas uma imagem, deixe-a com 100% de largura e maior em altura, e para duas imagens, com 50% de largura e maior em altura.

O número de imagens é diferente para cada página. Alguma dica de como fazer isso?

.gallery {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 8px;
}

.gallery>.img {
  width: 100% !important;
  position: relative;
  padding-bottom: 75%;
}

.gallery img {
  object-fit: cover;
  object-position: 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>

html