2.1 KiB
Estandarte (banner)
No menu do backoffice em Estandarte é gerido os grandes destaques das páginas do website, também conhecido como Banners, são aquelas boas imagens que ocupam toda a área da janela com um título por cima bem destacado e as vezes com algum texto introdutório, há outros mais curtos e de muitas outras formas.
O estandarte pode conter Título, Descrição, Imagem e Ordem (ordenação).
ReactJS & CSS/LESS
O componente ReactJS que gere todos os Estandartes (banner) no website fica em:
website/src/components/Banner
O componente recebe diversas propriedades como título (title), conteúdo (content), imagem (image), entre outras.
Antes de realizar a customização analise as propriedades e o código CSS/LESS associado ao componente.
Tipo (type)
Os estandartes (banner) devem conter um tipo associado.
O tipo pode ser customizado no formulário Estandarte > Tipo, onde o campo código é o valor que é utilizado pelo componente ReactJS na propriedade type.
Então a propriedade type recebida no componente ReactJS website/src/components/Banner define o tipo de estandarte que será procesado.
A propriedade type pode ser utilizada em condições para customizar a estrutura HTML que será processada na renderização do componente.
O type também deve adicionado nas propriedades className de tags HTML geradas pelo componente, para manter o padrão e organização de nomes, e ainda facilita custumizar a sua aparência no código CSS/LESS.
Posição (position_x & position_y)
A posição X e Y servem para ajustar o foco da imagem de background nas diversas resoluções, o valor habitual é em porcentagem.
Permite controlar uma parte da imagem que seja necessário estar sempre visível.
Por exemplo se ambos os campostos conter o valor 50%, então quer dizer que o foco será no centro da imagem, ou seja em qualquer resolução a parte da imagem que estará sempre visível será o seu centro.