Uma galeria de produtos em /screenshots

Featurekamo-marketing
Navios
4 de setembro de 2026 às 01:50 UTC
Autor
Kamo
Enviar
cf243e4

Uma página para mostrar o produto como ele realmente parece. É construído em torno de um módulo de dados em vez de marcação, porque mais imagens estão a chegar e adicionar um não deve significar editar um componente: solte o WebP em public/img/screenshots, adicione uma entrada para app/lib/screenshots, adicione sua cópia ao dicionário. A página tem duas metades e cada uma desaparece quando está vazia. Apresentado fotos obter uma seção de vitrine completa — cópia, chips de capacidade, a imagem em cromo da janela, e uma chave numerada para os chamados fixados nele. Tudo outro cai em uma grade filtrável abaixo, cuja categoria chips só renderizam uma vez que existem duas categorias para escolher entre. Hoje isso significa um vitrine e nenhuma grade; ele preenche por conta própria como tiros são adicionados. Clicar em qualquer imagem abre um visualizador: teclas de seta e miniaturas para mover entre tiros, Fuja para sair, foco preso e, em seguida, entregue de volta para o imagem que o abriu, e um zoom 1:1 que panes com o próprio palco a rolar. O visualizador serve o WebP no disco em vez de um otimizado variante — um srcset responsivo é escolhido a partir do viewport, então ampliando daqueles a 1:1 mostra uma imagem de 3231px em escala de 1920 e cada A etiqueta fica macia. Três coisas que vale a pena saber: - imagens.qualidades ganha 75. Próximo 16 não rejeita uma qualidade em falta a partir dessa lista, ele SNAPS-lo para o valor listado mais próximo, então cada A imagem estava a ser recodificada aos 50 sem aviso em lado nenhum. Isso. é certo para uma fotografia sob um scrim escuro e errado para uma imagem Feito de etiquetas UI 12px. - Os pinos de chamada são do tamanho do ponto, com o rótulo fora de fluxo. Laid para fora como uma linha flex, `traduzir(-50%)` centra o pino em ponto mais uma etiqueta invisível 15rem, e cada pino pousa vários por cento fora do algo que aponta — por uma quantidade diferente cada. - O espectador senta-se em z-index 100000. O banner da oferta está em 99999 e a navegação em 10001; um modal que o cabeçalho fixo pinta sobre não é um modal. Registrado no menu Produto, o rodapé, / site-map, ambos os mapas de site e llms.txt, com uma fonte ImageObject para que as imagens possam ser encontradas nas suas possuir em busca de imagens. Verificado em uma construção de produção: a rota ainda está pré-renderizados e abertos/zoom/Escape/focus-return foram conduzidos com real eventos de entrada no desktop e larguras de telefone.

Todas as alterações

Como o que vês no transporte?

Cada uma dessas atualizações pousa automaticamente em seu espaço de trabalho. Comece grátis e veja crescer semana após semana.

Começar Livre Para SempreVer Preços