news page

[nmcardoso]

Implementação da página de notícias

• Conteúdo
• Design @marixko
• Implementação @nmcardoso

[nmcardoso]

@marixko vamos usar essa issue pra trabalhar nos posts. Me mande aqui o design quando puder. Se não der pra mandar desenhado, você pode descrever com texto mesmo.

[marixko]

@nmcardoso eu não consegui ainda fazer no programa, mas rascunhei como pode ficar. Seria basicamente deixar o conteúdo em duas colunas, a primeira à esquerda (coluna 1) ocupando cerca de 70% da width. Desenhado em verde tracejado estão os campos que não terão borda.

Coluna 1 (à esq.):

• carrossel com os ultimos posts com tag "press-release" (melhor tag ou categoria?).
• dividir height em mais ou menos 90%/10%, 90% pra imagem, 10% restante para um preview do texto (pode ser o subtitulo ou as primeiras linhas do post, não sei o que vai ficar melhor). Deixar talvez 1 ou 2 em de espaçamento entre o texto e a imagem.
• eu esqueci de colocar no rascunho, mas o texto vai ser justificado à esquerda, com "..." depois de um certo limite de caracteres e com um link "Read more" para o post
• a imagem também é clicável para o post.
• a imagem que constará no carrossel é a primeira que aparece no post. Se não tiver imagem, deixar um quadro escuro como default (podemos melhorar isso depois)
• Limitar para talvez 5 últimas postagens?

Coluna 2 (à dir.):

• Modificar o estilo da lista, criando uma nova classe mais ou menos assim: padding: 15 px; box-shadow: #ccc 2px 2px 16px; margin: 10px; border-radius: 12px
• Não sei se vai precisar limitar a quantidade de cards, mas acho que pra um futuro próximo não vai precisar, não teremos tantos anúncios a ponto de ficar inviável carregar o site.
• Acho que não vai precisar fazer o redirecionamento automático de posts com certas tags para essa lista de anúncio. Se alguém quiser fazer esse link, ela pode fazer manualmente por enquanto.

Tanto pra coluna 1 quanto pra coluna 2 precisaria de uma nova classe de container pra delimitar o height. Eu creio que não precisará de borda nem pra coluna 1 nem pra coluna 2. Deixar um bom espaçamento entre coluna 1 e coluna 2 (eu diria que no mínimo o triplo do espaçamento entre componentes de cada coluna).

Não tenho certeza se os valores que te passei vão ficar bons, mas acho que dá pra um gasto por hora! Por favor fique à vontade de modificar da forma que você achar melhor.

Acho que é isso, se faltar alguma coisa me avise!

[marixko]

A lista de anúncios tem que ficar mais ou menos assim (não tá com os tamanhos certos do container):

[nmcardoso]

@marixko, fiz uma implementação inicial da nova página news

Abaixo, um print da página rodando no ambiente de desenvolvimento

Ela também está disponível no ambiente de produção pelo link: https://www.splus.iag.usp.br/news-dev/.

Para adicionar um post no carrossel, adicione o post à categoria "news" (esta categoria já existia com este nome) (seleção vermelha na imagem abaixo). Para definir a imagem que aparecerá no carrosel, preencha o campo "featured image" (seleção azul). E, para adicionar um post na lista de "announcements", adicione o post à categoria announcements. Aparece uma imagem azul para press-releases sem "featured image" definida.

Eu tentei implementar o mais próximo da especificação reaproveitando códigos existentes. O carrossel não ficou muito próximo da especificação, pois parti do carrossel do bootstrap. Esta é uma implementação inicial vai aprimorada com o tempo, gostaria dos seus pontos de vista sobre esta implementação.

Como apenas os últimos posts da categoria "news" aparecem no carrossel, isso significa que os posts mais antigos não serão indexados em lugar algum e serão acessíveis apenas por link direto. Eu não sei se este é exatamente o comportamento desejado. Mas caso não for, então eu segeriria fazer algo parecido com a imagem abaixo e deixar o carrossel para posts em destaque (posts com a categoria "featured") e abaixo uma listagem de todos os posts em ordem descresente de data (com paginação). Com isso, todos os posts estariam indexados. Mas eu não sei qual o comportamento desejado.

Gostaria de te pedir para fazer os testes (definindo as categorias e "featured image") assim que possível e me dizer sobre o que achou. Caso ache algum bug, me reporte. Sempre que fizer algumas dessas modificações, a página https://www.splus.iag.usp.br/news-dev/ é automaticamente atualizada. Estes "Latest news" da última imagem não foram implementados.

[marixko]

Natanael, acho que precisa só de alguns pequenos ajustes estéticos pra deixar essa página no ar:

• teria que dar um jeito pra essa imagem do carrossel não ficar assim distorcida. Ou fixa que a resolução sempre seja quadrada ou mantem essa resolução e imagens quadradas terão preenchimento lateral na cor preta (ou outra cor). Eu acho que prefiro a primeira opção, dá uma olhada

• Aqui trocar de py-2 pra py-3 (na linha que está em highlight)

[nmcardoso]

Oi Liliane, A atualização já foi despachada para o servidor de produção. Você pode tornar essa página padrão quando quiser, basta trocar o "template" da página para "Blog Index" em "Page Attributes", igual mostra a figura. Para voltar troque o template para "Default Template". Todo conteúdo da página continuará salvo, mas não será renderizado na página, então não precisa apagar o conteúdo que tiver na página "news". O único valor considerado é o título.

[marixko]

Atualizei a página! Só não foi o ajuste do carrosel, acho

[nmcardoso]

Isso acontece pq seu navegador ainda tá carregando o arquivo css antigo (cache). Recarrege a página com Ctrl+F5 para forçar o navegador a atualizar o cache.

[marixko]

haha puts, é verdade, tinha esquecido do cache. Certinho!!