Pré-visualizações da lista de tópicos (TLP)

[merefield (Robert)]

Este é um Componente de Tema, mas possui a opção de adicionar um plugin complementar.

	Resumo	O componente Topic Preview original que permite adicionar imagens e trechos (e mais!) à Lista de Tópicos, com a possibilidade de configurar quais adições aparecem em qual lista.
	Link do Repositório	GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub
	Guia de Instalação	Installing a theme or theme component
	Patrocínio	Considere tornar-se um patrocinador contínuo do meu trabalho open source em um nível que atenda aos recursos e necessidades da sua pessoa ou organização, para garantir que este componente receba a manutenção que merece e continue funcionando para o seu site no futuro.

Gostando deste Componente de Tema? Por favor, dê um no GitHub

Instalar este componente de tema

Funciona muito bem com Discourse Bars 🍻 🍸 (a sidebar framework)!

Visão Geral

O Topic List Previews permite que você:

• Adicione miniaturas, trechos, avatares de participantes e estatísticas de tópicos às listas de tópicos
• Use linhas tradicionais, tiles responsivos ou layouts estilo masonry
• Configure prévias independentemente por lista de tópicos, categoria e tag
• Controle o tamanho, a resolução, as alternativas (fallbacks) e os limites de exibição das miniaturas
• Destaque tópicos selecionados com tiles em destaque maiores
• Adicione tópicos “Em Destaque” acima das listas de tópicos, filtrados e ordenados conforme necessário
• Enriqueça a pesquisa em página completa com miniaturas, trechos e detalhes do autor
• Adicione uma Parede de Usuários às páginas de atividade - o recurso “Portfólio”

O Sidecar

Este pode ser complementado com o plugin ‘sidecar’: https://github.com/merefield/discourse-topic-previews-sidecar-pro

Este é atualmente um repositório privado, ao qual meus patrocinadores do GitHub que contribuem com pelo menos US$ 7/mês ganham acesso.

para adicionar os seguintes recursos:

• ‘Ações’ — marcar, compartilhar e curtir diretamente da lista de tópicos
• Seletor de miniaturas — selecione qualquer imagem do tópico inteiro
• Fundos com cor dominante baseados na miniatura selecionada
• Remoção automática de bordas pretas de miniaturas do YouTube
• Recriação opcional de miniaturas ao reconstruir um post de tópico
• Comprimento de trecho configurável e remoção opcional de links
• Pré-visualizações de solução aceita e respostas de Q&A
• Opção de mostrar o trecho do post mais recente
• Opção de direcionar cliques na pré-visualização para o post mais recente
• Pré-visualizações de miniaturas nos resultados de pesquisa
• Preferência por usuário para miniaturas de resolução mais baixa

Guia de instalação do plugin: Install plugins on a self-hosted site

Você precisa pelo menos do Componente de Tema; o Plugin é opcional.

Essas configurações podem ser aplicadas a todas ou a listas de tópicos selecionadas, em base global do site ou específica por categoria.

Este conjunto de recursos flexível permite que você crie uma variedade de diferentes estilos de lista de tópicos, incluindo

Estilo Básico

Configurações relevantes

• miniatura da lista de tópicos
• trecho da lista de tópicos
• ação da lista de tópicos

Estilo Pinterest (Masonry) aka ‘tiles’

Configurações relevantes

• tiles da lista de tópicos
• miniatura da lista de tópicos
• trecho da lista de tópicos
• ação da lista de tópicos
• largura da miniatura da lista de tópicos
• altura da miniatura da lista de tópicos

que possui opção de formato amplo (atrás da configuração topic_list_tiles_wide_format):

Isso funciona de forma responsiva, então colapsará para o formato masonry se não for dada largura suficiente (e vice-versa).

Imagens em Destaque

Configurações relevantes

• tag de imagens em destaque da lista de tópicos
• contagem de imagens em destaque da lista de tópicos
• largura em destaque da lista de tópicos
• altura em destaque da lista de tópicos
• título em destaque da lista de tópicos
• trecho em destaque da lista de tópicos
• ordem em destaque da lista de tópicos

Alternando Trechos:

Eu introduzi isso há algum tempo para uso com meu plugin AI Topic Summaries.

Você pode usá-lo para TLP:

GitHub - merefield/discourse-tc-excerpts-toggle: A small Discourse theme component that adds a...

Exemplos no Mundo Real

• https://www.artofsm.art/

Suporte

Eu não forneço suporte garantido gratuitamente. Posso fornecer suporte a empresas ou instituições que se inscreverem em um dos meus níveis mensais de Patrocínio GOLD ou PLATINUM.

Também há uma opção de caça a bugs avulsa.

[raghukamath (Raghavendra Kamath)]

Existe uma maneira de fazer com que a ordem da imagem em destaque seja baseada no momento em que a tag é adicionada? Atualmente, ele traz a imagem em destaque do tópico que tem atividade recente, empurrando as imagens com as tags mais recentes para baixo.

Por exemplo, se eu tiver 10 imagens, marco 5 delas como em destaque, agora essas 5 são mostradas na barra superior. Se eu adicionar mais 5 tags, elas substituirão as 5 existentes. Mas se algum dos 5 tópicos anteriores tiver comentários ou postagens, essa imagem será trazida para a frente agora.

[merefield (Robert)]

Etiqueta? Não, mas existe esta opção para ordenar por data de criação:

[merefield (Robert)]

Aviso: Vou implementar uma alteração no layout dos Tiles (item) em breve. Se você tiver alguns ajustes de CSS, eles podem precisar ser… hum… ajustados:

Eu prometo que não farei isso com muita frequência, mas esta alteração é para organizar as coisas e facilitar algumas novas funcionalidades que podem aparecer no futuro…

Atualmente, a alteração está no branch beta.

[raghukamath (Raghavendra Kamath)]

Sim, essa opção ajuda um pouco, mas se alguma das postagens mais antigas tiver alguma atualização, ela virá para a frente.

[merefield (Robert)]

Estou usando apenas as opções nativas disponíveis na API do Discourse (é um Componente de Tema em sua essência, então você não pode alterar a API). Quando tiver tempo, darei uma olhada na ordenação novamente. No entanto, isso surgiu há um tempo e fiz uma alteração para ajudar um dos usuários. Topic List Previews (legacy) - #1154 by merefield. Surpreende-me que isso não esteja funcionando como especificado. Você esperaria que o created_at de um Tópico permanecesse estático, apesar de novas postagens? Tem certeza de que alterou a configuração e atualizou o navegador?

[merefield (Robert)]

@raghukamath Acabei de testar isto e parece estar a funcionar como esperado? Ainda não mudará a ordem em resposta a novas Publicações e respeita a data created_at. Por favor, atualize o seu navegador e tente novamente.

[raghukamath (Raghavendra Kamath)]

Sem problemas. Vou testar mais. Talvez eu tenha me confundido devido ao comportamento quando a opção está ativada. Desculpe incomodar tanto.

Outra questão que meus membros destacaram é sobre a correção CSS de cor dos tópicos não lidos e lidos não estar sendo aplicada aos navegadores móveis.

[merefield (Robert)]

@raghukamath

Um outro problema que meus membros destacaram é sobre a correção de CSS de cor de tópico não lido e lido não estar sendo aplicada aos navegadores móveis.

Sim, isso ainda estava pendente, como afirmado anteriormente. Tentarei enviar isso com a atualização de layout descrita acima, provavelmente em alguns dias.

[flash]

Olá, eu estava tentando trabalhar com o plugin git depreciado quando não consegui substituir o CSS na miniatura móvel. Continuou revertendo para uma altura de 80px. Comecei a pesquisar e vi que foi movido para o componente. Terei o mesmo problema e precisarei clonar o componente para alterá-lo ou existe outra solução? Quero que o celular tenha largura total no navegador móvel.

[merefield (Robert)]

O layout aqui não atenderia às suas necessidades: Topic List Previews (TLP) - #4 by merefield atenderia às suas necessidades? Os novos blocos têm miniaturas de largura total. Isso está atualmente no branch beta. Instale isso, se desejar, como um Componente de Tema adicional e experimente. Lembre-se de especificar o branch ao instalar e editar o nome do Componente de Tema para deixar claro que é a versão Beta.

[flash]

Isso definitivamente faria. Eu o tenho em tela cheia agora, como eu queria. Obrigado.

[merefield (Robert)]

Eu mesclei o branch beta:

• o estilo interno dos blocos foi modernizado e organizado. As miniaturas agora ocupam a largura total da coluna.
• há uma série de simplificações de CSS
• o layout móvel teve algumas pequenas melhorias para blocos não-tiles.
• os títulos dos blocos agora devem refletir visitas anteriores também no celular.

Layout changes

[sofi.pocketful (Sofi)]

Olá,\n\nObrigado por este componente incrível! Adoro o design \n\nSou relativamente novo no Discourse e não sei muito sobre os termos técnicos.\n\nTenho tido problemas com as imagens não aparecendo no componente de lista. Por algum motivo, as imagens aparecem na pré-visualização do componente, mas quando carrego o real, as imagens não estão mais lá.\n\n

\n^ Esta é a pré-visualização do componente

[sofi.pocketful (Sofi)]

^ É assim que fica quando carrego a página real

Agora, acredito que tenha algo a ver com minhas configurações do Discourse??

Existe alguma configuração específica que precise ser ativada para que este componente funcione? Eu realmente não sei por que não está funcionando como deveria…

[merefield (Robert)]

Olá, obrigado pelo seu interesse.

Algumas coisas:

• Se você nunca instalou um componente ou plugin semelhante antes, pode haver um atraso antes que todas as miniaturas sejam geradas. Este é um processo em lote e leva tempo. Este processo deve começar a ser executado em segundo plano automaticamente assim que você instalar o componente e adicioná-lo a um tema. Verifique sua fila do Sidekiq. Você pode ver muitos trabalhos enfileirados.
• Não é necessariamente compatível com qualquer tema, sempre há a possibilidade de um conflito: ele é desenvolvido e projetado apenas com o tema padrão. Por favor, teste-o em seu site apenas com o tema padrão inicialmente. Você pode adaptar sua aparência, mas isso precisará ser baseado nos artefatos especiais deste componente.

[sofi.pocketful (Sofi)]

Olá Robert,

Obrigado pela sua resposta! Vou testar o que você sugeriu no meu site

[flash]

Olá, Robert. Estou trazendo uma tabela com JavaScript de terceiros abaixo do cabeçalho e o script quebra as prévias quando o uso em um componente. Alguma ideia de uma solução alternativa?

[merefield (Robert)]

Se houver um erro nesse script que esteja impedindo a execução do JavaScript, isso pode quebrar o código de layout do TLP, que exige que o JavaScript esteja funcionando da melhor maneira possível. Procure por erros vermelhos no console do seu navegador.

[raghukamath (Raghavendra Kamath)]

@merefield

Acabei de testar isso e parece estar funcionando como esperado? Ainda não mudará a ordem em resposta a novas postagens e respeita a data created_at. Por favor, atualize seu navegador e tente novamente.

Olá, ativei a opção de data de criação conforme você sugeriu. Isso resolve parcialmente os problemas. mas acho que em plugins mais antigos a ordem era definida de acordo com a data em que a postagem era marcada. Além disso, o problema de imagens mais antigas aparecerem na página inicial em qualquer atualização ou resposta ao tópico dificulta que uma imagem recente permaneça em destaque. Suponha que eu marque uma imagem como destaque e, se alguma postagem antiga de um ano atrás receber uma nova resposta, a página inicial terá a imagem em destaque dessa postagem. Se muitas postagens antigas receberem respostas, a imagem em destaque recém-marcada desaparecerá.