Grav - Media
Os arquivos de mídia contêm diferentes tipos de conteúdo de exibição, como imagens, vídeos e muitos outros arquivos. Grav encontra e processa esses arquivos automaticamente para serem usados por qualquer página. Ao usar a funcionalidade integrada da página, você pode acessar metadados e modificar a mídia dinamicamente.
Smart-cachingé usado pelo Grav que cria mídia gerada em cache quando necessário. Desta forma, todos podem usar a versão em cache em vez de gerar mídia repetidamente.
Arquivos de mídia suportados
A seguir estão os tipos de arquivos de mídia que são suportados pelo Grav -
Image - jpg, jpeg, png
Animated Image - gif
vectorized Image - svg
Video - mp4, mov, m4v, swf
Data/information - txt, doc, pdf, html, zip, gz
Modos de exibição
A seguir estão alguns tipos de modos de exibição no Grav -
Source - É a exibição visual da imagem, vídeo ou arquivo.
text - Apresentação textual de arquivos de mídia.
thumbnail - Imagem em miniatura do arquivo de mídia.
Localização de miniaturas
Você pode localizar as miniaturas usando três locais -
In the same folder where your media files exists- [media-name]. [Media-extension] .thumb. [Thumb-extension]; aqui, media-name e media-extension são o nome e a extensão do arquivo de mídia real e a extensão thumb é a extensão compatível com o tipo de mídia de imagem.
User Folder − usuário / images / media / thumb- [extensão de mídia] .png; aqui, a extensão de mídia é a extensão do arquivo de mídia real.
System folder- system / images / media / thumb- [media-extension] .png; aqui, media-extension é a extensão do arquivo de mídia real.
Lightboxes e links
Grav fornece uma saída de uma tag âncora que contém alguns dos elementos para o plugin lightbox ler. Se você deseja usar uma biblioteca lightbox que não está incluída em seus plug-ins, você pode usar os seguintes atributos para criar seu próprio plug-in.
rel- Indica o link do lightbox. O valor é lightbox.
href - É um URL para o objeto de mídia.
data-width - Defina a largura da caixa de luz escolhida pelo usuário.
data-height - Defina a altura da caixa de luz escolhida pelo usuário.
data-srcset - string srcset é usado no caso de mídia de imagem.
Ações
O padrão Builder no Grav é usado para lidar com mídia, para realizar várias ações. Existem alguns tipos de ações que são suportados para todos os meios, enquanto alguns estão disponíveis apenas para meios específicos.
Geral
Existem 6 tipos de ações gerais disponíveis para os tipos de mídia. Cada ação é explicada a seguir.
| Sr. Não. | Ação e descrição |
|---|---|
| 1 | url () url () devolve raw url path para a mídia. |
| 2 | html ([título] [, alt] [, classes] A saída terá uma tag html válida para mídia. |
| 3 | display(mode) É usado para alternar entre os diferentes modos de exibição. Quando você alternar para o modo de exibição, todas as ações serão reiniciadas. |
| 4 | ligação() As ações aplicadas antes do link serão aplicadas ao destino do link. |
| 5 | lightbox ([largura, altura]) Lightbox é semelhante à ação de link, mas tem uma pequena diferença, pois cria um link com alguns atributos extras. |
| 6 | Miniatura Selecione entre a página e o padrão para qualquer tipo de arquivo de mídia e isso pode ser feito manualmente. |
Ações em imagens
A tabela a seguir lista algumas ações que são aplicadas às imagens.
| Sr. Não. | Ação e descrição |
|---|---|
| 1 | redimensionar (largura, altura, [fundo]) Altera a largura e a altura da imagem redimensionando. |
| 2 | forceResize (largura, altura) Estica a imagem conforme necessário, independentemente da proporção original. |
| 3 | cropResize (largura, altura) Redimensiona a imagem para um tamanho menor ou maior de acordo com sua largura e altura. |
| 4 | cortar (x, y, largura, altura) Recorta a imagem conforme descrito pela largura e altura do local x e y. |
| 5 | cropZoom (largura, altura) Ajuda a ampliar e cortar as imagens de acordo com a solicitação. |
| 6 | qualidade (valor) Define o valor da qualidade da imagem entre 0 e 100. |
| 7 | negar() As cores se invertem na negação. |
| 8 | brilho (valor) Com um value do -255 para +255, o filtro de brilho é adicionado à imagem. |
| 9 | contraste (valor) O valor de -100 a +100 é usado para aplicar o filtro de contraste à imagem. |
| 10 | escala de cinza () O filtro de tons de cinza é usado para processar a imagem. |
| 11 | relevo () O filtro de relevo também é usado para processar a imagem. |
| 12 | suave (valor) O filtro de suavização é aplicado às imagens definindo o valor de -10 a +10. |
| 13 | afiado() O filtro de nitidez é adicionado à imagem. |
| 14 | Beira() O filtro de localização de bordas é adicionado à imagem. |
| 15 | colorir (vermelho, verde, azul) Coloriza a imagem ajustando as cores vermelho, verde e azul. |
| 16 | sépia() O filtro sépia é adicionado para dar uma aparência vintage. |
Animação e vetorização de imagens e vídeos
Ações animadas e vetorizadas são feitas em imagens e vídeos. A seguir está a ação que ocorre em imagens e vídeos.
| Sr. Não. | Ação e descrição |
|---|---|
| 1 | redimensionar (largura, altura) A ação de redimensionamento será definida width, height, data-width e data-height atributos. |
Combinações
O Grav tem uma funcionalidade de manipulação de imagens que facilita o trabalho com imagens.
O código acima irá gerar uma saída conforme mostrado abaixo -
Imagens responsivas
A tabela a seguir lista alguns tipos de imagens responsivas.
| Sr. Não. | Ação e descrição |
|---|---|
| 1 | Telas de alta densidade Adicione um sufixo ao nome do arquivo e você pode adicionar uma imagem de maior densidade à página. |
| 2 | Tamanhos com consultas de mídia Adicione um sufixo ao nome do arquivo e você pode adicionar uma imagem de maior densidade à página. |
Metafiles
image1.jpg, archive.zipou qualquer outra referência tem a capacidade de definir variáveis ou pode ser substituída por um metarquivo. Esses arquivos assumem o formato de<filename>.meta.yaml. Por exemplo, se você tem uma imagem comoimage2.jpg, então seu metarquivo pode ser criado como image2.jpg.meta.yaml. O conteúdo deve estar na sintaxe yaml. Você pode adicionar quaisquer arquivos ou metadados que desejar usando este método.