Melhorar a conveniência na configuração de grade automática com menos de 3 imagens

Contribuir Funcionalidade
1

Contagem mínima configurável de imagens para grades automáticas

Deparei-me com uma limitação na funcionalidade de grade automática de imagens.

No momento, o comportamento da grade automática parece ser controlado pela configuração do site para imagens em grade automática, mas o limite real para quando o compositor insere [grid]...[/grid] ainda está fixo no código do frontend.

A lógica relevante do compositor atualmente usa um valor codificado:

const MIN_IMAGES_TO_AUTO_GRID = 3;

Portanto, pelo que posso ver, os administradores atualmente têm a escolha entre:

O que os administradores podem fazer agora Resultado
Ativar imagens em grade automática Uploads de 3 ou mais imagens consecutivas são automaticamente envolvidos em [grid]...[/grid]
Desativar imagens em grade automática Nenhum envolvimento automático em grade
Alterar o limite de 3 para outro número Não disponível atualmente como configuração do site

O problema é que 3 nem sempre é o limite certo para todas as comunidades.

Para alguns sites, as grades automáticas são úteis, mas apenas quando os usuários fazem upload de um lote maior de imagens. Por exemplo, um administrador pode querer que a grade automática comece em 5, 6, 10 ou outro valor, em vez de ser acionada assim que 3 imagens são enviadas.

Isso seria especialmente útil para comunidades onde os usuários frequentemente enviam um pequeno número de imagens em linha com texto explicativo, mas galerias maiores ainda deveriam ser compactadas em uma grade.

Direção proposta

Acho que isso poderia ser melhorado adicionando uma configuração do site configurável para o número mínimo de uploads consecutivos de imagens antes que o compositor insira automaticamente uma grade.

Algo como:

auto_grid_images_minimum_count

Por exemplo:

Configuração Valor de exemplo
enable_auto_grid_images true
auto_grid_images_minimum_count 5

Então, a grade automática ainda estaria disponível, mas só seria acionada quando o limite configurado fosse atingido.

Isso mantém o comportamento existente como padrão se a nova configuração tiver 3 como valor padrão, enquanto dá mais controle aos administradores.

Ramo experimental / possível vantagem

Criei um pequeno ramo experimental aqui, caso alguém com mais experiência em desenvolvimento Discourse tenha tempo para bifurcá-lo, limpá-lo ou levar a ideia adiante:

ramo image-grid-num-setting

O ramo não é destinado a ser um PR polido ainda. É mais um ponto de partida mostrando a direção pretendida:

  • adicionar uma nova configuração do site para a contagem mínima de imagens da grade automática
  • expor essa configuração ao cliente
  • substituir a verificação codificada MIN_IMAGES_TO_AUTO_GRID = 3 no código de upload do compositor pelo valor configurado
  • atualizar o texto da configuração do administrador para que a redação existente da grade automática não implique mais que o limite é sempre 3
  • adicionar/atualizar especificações do frontend, se necessário

O tipo de alteração de frontend que tinha em mente é aproximadamente:

const minImagesToAutoGrid = Number(
  this.siteSettings.auto_grid_images_minimum_count ?? 3
);

if (
  this.siteSettings.enable_auto_grid_images &&
  this.#consecutiveImages?.length >= minImagesToAutoGrid &&
  this.textManipulation
) {
  this.textManipulation.autoGridImages([...this.#consecutiveImages]);
  this.#consecutiveImages.length = 0;
}

Há também um exemplo recente de uma configuração de site de enumeração estilo Discourse no PR #36014:

PR #36014 - FEATURE: adiciona configuração calendar_upcoming_events_default_view

Esse PR é para o plugin Calendar and Events, não para grades de imagens diretamente, então não estou sugerindo que ele afete essa funcionalidade. Menciono-o porque parece mostrar um padrão de implementação útil para esse tipo de configuração do site configurável: definir a configuração, expô-la ao cliente e, em seguida, lê-la do frontend via siteSettings.

Links relacionados

Discussão original sobre desativar imagens em grade automática:

Desativar imagens em grade automática?

Anúncio de grades automáticas de imagens:

Aplicar grades automaticamente a uploads de imagens

Exemplo de PR mostrando arquitetura de configuração do site:

PR #36014 - FEATURE: adiciona configuração calendar_upcoming_events_default_view

Meu ramo experimental:

ramo image-grid-num-setting

2 curtidas
2

Você poderia compartilhar um pouco mais sobre sua experiência específica?

Qual seria a configuração que você usaria e por quê?

3

Obrigado – sim.

Para meu site, eu provavelmente definiria o limite em 5 imagens.

O motivo é que muitas postagens podem conter naturalmente 3 imagens sem realmente serem uma “galeria”. Por exemplo, um usuário pode fazer upload de:

  • um print de um problema
  • um segundo print mostrando a configuração/erro relevante
  • uma terceira imagem mostrando o resultado ou comparação

Nessa situação, o grid automático se aplica a imagens consecutivas e ajuda a evitar a dispersão visual.

Também estou ciente de que incentivar muitos uploads de imagens não é ideal para o tamanho de armazenamento ou backup, então não estou tentando levar os usuários a postagens com muitas imagens. Meu ponto é mais sobre o controle de layout quando várias imagens já estão sendo enviadas.

Para mim, o grid automático se torna mais útil quando uma postagem claramente ultrapassa algumas imagens explicativas e entra em um lote maior de imagens. Cerca de 5 imagens parece ser um limite melhor para isso no meu site.

Então, não quero desativar o grid automático completamente. Gosto do recurso em alguns casos. O problema é apenas que o limite fixo atual de 3 é um pouco agressivo demais para comunidades onde pequenos grupos de imagens são frequentemente usados como parte de uma explicação.

É por isso que acho que uma configuração de site como auto_grid_images_minimum_count seria útil. Sites que gostam do comportamento atual podem deixá-lo em 3, enquanto sites como o meu poderiam aumentá-lo para 5, 2 ou outro valor.

2 curtidas
4

No seu caso específico, e se:

  • o auto-grid usasse o layout “carrossel” por padrão ou
  • fosse mais fácil para os usuários “desagrupar” o grupo inteiro

Outra ideia está ocorrendo a mim agora…

Talvez valha a pena separar ainda mais o conceito de “grupo de imagens” do “layout” desse grupo.

Por exemplo, no editor rico, se você pudesse alternar entre três opções para um grupo (lista, grade, carrossel), mantendo todos no grupo, talvez isso facilitasse para os usuários ou moderadores escolherem o layout preferido com um único clique, nos casos em que a heurística escolhida para definir o padrão não seja o que eles desejam.

5

Sim, acho que essa separação faz sentido.

No meu caso, o problema principal não é realmente a existência de grades. O fato é que a heurística atual toma uma decisão de layout bem cedo, ao detectar 3 imagens consecutivas, e depois expõe essa decisão como marcação [grid]...[/grid] na publicação.

Concordo que separar “este é um grupo de imagens” de “este grupo deve ser exibido como lista/grade/carrossel” provavelmente resultaria em um modelo mais limpo a longo prazo.

Algo assim faria sentido para mim:

  • o editor reconhece ou cria um grupo de imagens, ou seja, reconhecendo no editor de texto rico ou criando no editor Markdown.
  • o grupo tem uma opção de layout: lista, grade ou carrossel — um parâmetro para o BBCode.
  • usuários ou moderadores podem alterar esse layout com uma única ação, o que é possível através do segundo painel no editor Markdown.
  • a publicação não depende dos usuários entenderem ou preservarem cuidadosamente as tags [grid], o que é uma das utilidades do editor de texto rico de painel único.

Isso provavelmente resolveria mais casos do que apenas adicionar uma configuração de limite, mas ainda assim seria um recurso mais abrangente.

Para o meu site específico, acho que ainda escolheria lista como padrão para pequenos grupos de imagens, porque 3 capturas de tela geralmente fazem parte de uma explicação, em vez de uma galeria. Para lotes maiores, consigo ver a utilidade de grades ou carrosséis.

Então, talvez haja dois níveis de melhoria:

  1. uma configuração administrativa menor para o comportamento atual, como auto_grid_images_minimum_count, mantendo o padrão existente de 3
  2. um modelo de layout de grupo de imagens mais rico no futuro, onde lista/grade/carrossel possam ser alterados mais facilmente sem editar a marcação manualmente. No entanto, acredito que isso pertença a um tópico de solicitação de recurso diferente.

Embora, se a segunda direção for preferida, então minha sugestão inicial sobre essa configuração de limite pode ser menos importante, mas acho que o problema subjacente é o mesmo: administradores e usuários precisam de um pouco mais de controle sobre quando várias imagens são tratadas como um bloco estilo galeria, em vez de imagens explicativas normais em linha.

1 curtida
6

Então, sim, acho que a forma como estou pensando agora seria fazer o seguinte:

  • quando mais de 1 imagem for enviada, envolver em [grid]
    • quando a contagem for <=3, definir como [grid mode=list] por padrão
    • quando a contagem for > 3 e <=10, definir como [grid mode=grid] por padrão
    • quando a contagem for > 10, definir como [grid mode=carousel] por padrão
  • no modo rico e na pré-visualização, facilitar para o usuário alternar entre os modos list, grid e carousel

@chapoi e @renato, curioso para saber o que vocês acham disso.

1 curtida
7

Não estou convencido. Mesmo no caso do exemplo da captura de tela do autor. Eu gostaria que eles ficassem lado a lado.

Sou mais a favor da configuração original proposta, se houver alguma, do que tentar ser inteligente com isso, mas devemos esperar até que esta solicitação de recurso tenha mais votos, ou até que tenhamos ouvido a mesma coisa em outro lugar, antes de tomar qualquer ação.

1 curtida