Processamento de imagem e imagens responsivas com Hugo o gerador de site estático - Todos os níveis

1. 1 introdução: Oi, meu nome é Sean. Sou desenvolvedor web e especialista em sites estáticos. Este curso trata de gerar imagens responsivas com Hugo, o gerador de sites estáticos Hugo tem poderosos recursos de processamento de imagem incorporados, mas gerenciar e gerar imagens responsivas se torna demorado e repetitivo Eu escrevi um módulo para automatizar esse processo, e este curso tem como objetivo guiá-lo no processo de configuração e uso No curso, analisamos imagens de largura fixa e responsiva Examinando as tags HTML para imagens, figuras e figuras. Usaremos tamanhos lentos para carregar imagens lentamente em todos os navegadores e gerar automaticamente a propriedade sizes responsiva Criaremos espaços reservados para carregamento de imagens para acelerar o tempo de carregamento da página Seremos inteligentes ao cortar imagens em diferentes proporções Usaremos códigos curtos e ganchos de renderização para gerar imagens em markdown E estamos analisando a configuração em linha e por meio recursos da página inicial metadados de recursos da página inicial e da configuração do site Lembre-se, se precisar de alguma ajuda, você sempre pode me enviar uma mensagem Seem in the course. 2. 2 configuração: A primeira coisa que você precisa fazer é baixar o início do modelo. Eu deixei um link para isso. Se você acessar o botão de código verde, poderá baixá-lo como um zip. Essa é a maneira mais fácil de fazer isso. Pegue uma cópia desse arquivo zip e extraia-o, e então começaremos. Depois de abrir isso no Visual Studio Code, você terá que ir ao terminal. Vamos inicializá-lo como um repositório Git para que você possa salvar Você também pode copiar e colar um link no seu repositório Git Se precisar de ajuda, use o comando git que o inicializará como um repositório E você verá a pasta dot git aparecer. Em seguida, à esquerda, temos uma lista de arquivos que precisam ser confirmados para serem obtidos. Há um arquivo dot git ignore. Isso é muito importante porque diz ao git quais arquivos não devem ser enviados para o repositório Git, por exemplo, módulos Se você importasse alguns pacotes, por exemplo, falaremos sobre tamanhos lazy Você não quer enviar isso para o seu repositório Git porque isso aumentará substancialmente o tamanho dele Então o que fazemos é usar Github Desktop para a próxima etapa, quando o Github Desktop e ele está disponível no Mac, eu vou para o arquivo e adiciono repositório local e então você escolhe o caminho do Depois de clicar na pasta em que seu projeto está, você clica em Selecionar pasta e ela poderá ser adicionada ao Github Desktop porque você já executou o comando git init Eu acho que é muito mais fácil assim. Em seguida, você precisa fazer sua primeira confirmação na caixa de resumo, podemos escrever o modelo de confirmação do projeto. Então você precisa publicá-lo. Se quiser, você pode mantê-lo privado. Vou tornar o meu público para que vocês possam vê-lo. Se você tiver várias, se tiver organizações configuradas para esse fim, se escolher sua organização, provavelmente não terá organizações, provavelmente não terá essa opção lá. Você pode colocar uma descrição. Vou ligar para o meu curso Skillshare sobre imagens responsivas do Hugo responsivas Agora, se você acessar o menu do repositório e visualizar no Github, podemos ver como é e também podemos acessar o link e você pode colá-lo se precisar E aí está o repositório no Github, e eu também vou colocar esse link abaixo Você pode obter ajuda em cada etapa do processo. Você pode ver o progresso que eu estava fazendo. Vou colocar o progresso na seção de filiais. Não vou mostrar pessoalmente como se comprometer com filiais todas as vezes, mas vou lembrá-lo, no final de cada aula, de fazer um compromisso e mostrarei como isso funciona. Preciso adicionar o módulo de imagens responsivas. E isso vai acelerar muito as coisas porque eu já escrevi pessoalmente todo o código para você. Tudo o que você precisa fazer é implementá-lo. Deixei o link abaixo para o módulo de processamento de imagem. Antes de começar, certifique-se de apertar o botão estrela. Isso me ajuda a acompanhar quantas pessoas o estão realmente usando. O que é, é um módulo Hugo e, se você adicioná-lo ao seu projeto, ele fará todo o processamento para você E até imprimirá as etiquetas. O que ele faz quando você passa para as imagens que deseja colocar em seu site e diz quais larguras deseja, na verdade, gera várias larguras para diferentes larguras de tela Ou, se as imagens forem fixadas, ele gerará a imagem em diferentes densidades Para telas de alta densidade, digamos que você esteja usando uma tela retina em um dispositivo móvel, você quer que ela tenha pelo menos duas vezes a densidade, o dobro do tamanho, porque resolução da tela é muito maior Se você rolar para baixo, temos as instruções de instalação aqui. Antes de fazer isso, precisamos inicializar nosso projeto para aceitar os módulos Hugo Vamos usar o Hugo mod it. Em seguida, você precisa fornecer o caminho para seu projeto, onde ele está armazenado no Github ou em outro provedor do Git Vamos para o terminal e hugo mood em meu projeto armazenado no GitHub.com slash future hugo em meu projeto armazenado no GitHub.com slash future hugo responsive images module. Depois que isso for executado, você verá que agora temos um bom arquivo. No topo, tem o endereço do repositório desse projeto Em seguida, especifica qual versão do Go você instalou Você precisa ter o Golang instalado. Agora, a maneira mais fácil de instalar isso no Windows, eu usaria chocolate. E o comando é chocolate install. Se você estiver no Linux ou Mac, eu instalaria o Go. Você precisará ter o chocolate instalado no Windows e precisará ter o brew instalado no Linux ou Mac para que isso funcione. Eu também recomendo esse método para Hugo. Se você receber meu curso de introdução ao hugo, verá como isso funciona Agora que temos nosso arquivo go mod configurado, precisamos importar o módulo Adicionaremos o módulo à configuração. Temos esse exemplo de como adicioná-lo. Se você tiver outros módulos, certifique-se de não duplicar e apenas adicionar o caminho extra. Essa última linha, porque não temos o módulo e a importação configurados, vamos adicioná-la ao nosso painel de pontos de configuração Vamos colar isso. Salve isso. A última etapa é instalar o módulo com o Hugo mod Get Se você quiser atualizar seus módulos, você pode colocar um traço U no final Vamos executá-lo e ele buscará o módulo do arquivo de configuração que foi instalado Se você for, verá lá a versão do pacote. Também faz referência a outro pacote chamado Image in common, que é algo que eu usei em imagens responsivas Se você está se perguntando por que há um pacote extra lá, meu Deus, você verá que só temos um módulo necessário. A próxima coisa que você precisa fazer é obter algumas imagens de espaço reservado para o site que estamos prestes a criar Eu recomendaria colocar a maioria deles na orientação paisagem. Eu recomendo o Unsplash.com ou existem outros fornecedores disponíveis quando você os baixa Sua melhor opção é se você estiver no unsplash, clicar na imagem e especificar o especificar o Eu diria médio ou grande, mas definitivamente não faça o original nem o pequeno. Se você fizer algo pequeno, não será demais redimensionar seu projeto com o que estamos fazendo. Depois de baixar todas as suas imagens, coloque-as na pasta estática e IMG Não é disso que vamos realmente obtê-las, mas é um lugar onde você pode armazená-las temporariamente agora que tudo está configurado, incluindo nossas imagens de espaço reservado Vamos até o botão de controle de origem Esse é o terceiro na minha tela. Isso está incluído por padrão no código do Visual Studio. Da última vez, fizemos um commit via desktop do Github. Agora vamos usar o código do Visual Studio porque é muito mais rápido. Certifique-se de que tudo esteja sob as alterações e, em seguida, possamos colocá-lo em uma mensagem. O primeiro que faremos é inicializar e adicionar o módulo. O que faremos é manter pressionada a tecla shift e clicar nos três primeiros itens. Isso é o que tem pontos curingas e condenado, clique com o botão direito do mouse e entrará Agora, somente os itens do estágio serão realmente comprometidos. A mensagem para esses três, é importante que você verifique se a mensagem está correta. Vamos cometer isso. Agora que estamos mudando, adicionamos imagens de espaço reservado e as confirmaremos Então, quando terminarmos a aula, você precisará clicar em sincronizar as alterações, para que ela seja carregada no Github, caso contrário, ela permanecerá no seu computador Isso é bom. Mas é bom fazer o backup no Github e também se você precisar me enviar um link do seu trabalho para obter ajuda, é assim que você vai fazer 3. Imagens de largura fixa: Esta lição sobre fixar com imagens. São imagens que não são redimensionadas, conforme você redimensiona a tela ou visualiza a página em uma tela menor para gerar uma imagem fixa Estamos na página Leia-me do Github só para lembrar que o link está abaixo Vamos nos basear no início rápido e analisaremos o exemplo de largura fixa e recursos de página. O primeiro é mais uma referência. Você pode gerar apenas uma tag de imagem, se quiser. Mas, de um modo geral, a tag pitch será mais útil para você porque é muito mais fácil fornecer vários formatos, e falarei sobre isso em breve. O que vamos fazer é copiar esse código, se você quiser. Vamos entrar em nosso projeto. Vamos abordar o conteúdo e sobre. O que faremos é renomear essa pasta para Fixed. Em seguida, entraremos no arquivo real e renomearemos o título para Fixed with Image Vamos retirar o conteúdo, vamos dar a ele um tipo de correção. Isso significa que estamos dizendo a Hugo que procure o layout chamado fixo Vamos para a pasta de layouts, criar uma nova pasta chamada fixa Vamos entrar no padrão e copiaremos o único HL para fixo. Agora ele vai procurar esse arquivo. Voltaremos ao nosso índice M D para corrigir, você precisa copiar uma imagem. Entramos em static e IMG e escolhemos uma imagem. Copie, não corte, você precisará dele para outro exemplo, cole em fixo. Então, o que podemos fazer é que algumas maneiras de fazer isso sejam corrigidas em nosso único HTML. E começaremos com nosso código na página do Github. Role para baixo até os exemplos de uso, também conhecidos como Início rápido. Vamos ver o exemplo parcial de largura fixa. Agora não vamos fazer a geração da tag IMG com a IMG apenas parcial Vamos usar a foto parcial porque queremos marcar a imagem, copiaremos esse exemplo. Em seguida, abaixo do conteúdo, vamos colá-lo. E você pode alugar o texto e tabulá-lo para formatá-lo bem, se desejar Atualmente, a fonte está definida como uma imagem que diz algo temporário. Se você clicar em dois ou clicar com o botão direito do mouse e renomear, podemos copiar o nome do arquivo E então vamos colar isso na fonte. Temos nossa largura definida para 300 pixels. Não coloque aspas duplas ao redor, ou não funcionará, pois se tornará uma string. Precisa ser um número. nosso conjunto de texto alternativo. Você precisa ter texto alternativo. E mostrarei uma maneira alternativa de fazer isso quando analisarmos os Recursos Globais. Porque atualmente estamos analisando os Recursos da página porque a imagem está na mesma pasta da sua página. Ctx significa contexto. Você notará que temos um título. O título vem da página, e isso é Whittle porque é esta página, não está em outro lugar. Também temos conteúdo e precisamos fornecer esse ponto ao parcial. Se, por exemplo, você tivesse um intervalo e estivesse variando sobre algo, o que você precisaria fazer para colocar o contexto da página dentro desse intervalo seria alterá-lo para o sinal de $1, porque o cifrão vai para o nível superior da página, sai do intervalo ou do W ou de qualquer outra forma de modificar o contexto Mas não estamos fazendo isso agora. Digamos que nos scripts do NPM, eu escrevi um script para você chamado dev Ele iniciará o servidor Hugo. Verifique se você tem o Hugo instalado. O Hugo não foi instalado com o NPM. Você instalou globalmente em seu sistema. Depois que o servidor Dev for iniciado, você poderá controlar o clique e abri-lo no navegador. Depois de abrir o navegador corrigido com a imagem, você pode clicar com o botão direito nele e inspecioná-lo como uma etiqueta de imagem gerada automaticamente para nós. Temos nossa fonte lá. E a primeira, web, a razão pela qual é web é porque a web é muito menor e carrega mais rápido. Atualmente, a maioria dos navegadores realmente o suporta. Mas temos um segundo formato, um formato alternativo, que é JP, que é o formato original que é muito maior e carrega muito mais lentamente Mas colocamos isso como um substituto, caso o navegador não o suporte Se você olhar para o topo ou qualquer um dos exemplos, notará que temos um exemplo de um x e depois um exemplo de dois X. Se você observar o tamanho, notará que temos 300 no primeiro e no segundo tamanho, 600. Se você colocar o mouse sobre a tag de imagem, que é outra parte traseira para navegadores que não suportam imagens, você notará que o tamanho real, se você observar o intrínseco, é 600 por 400 Isso é o dobro do tamanho. Esses são os dois x. Isso porque minha tela tem uma densidade de 1,5 vezes. Da forma como minha tela é exibida, é uma resolução um pouco maior do que o padrão. É assim que a maioria dos dispositivos está funcionando. É muito importante que se você estiver fornecendo uma imagem de largura fixa, forneça essas outras densidades Algumas telas chegam a 2,5, mas é discutível que não adianta adicionar três X porque você está apenas aumentando substancialmente o tamanho do arquivo Mesmo que fosse uma resolução de tela de 2,5 ou três vezes, talvez não fosse perceptível a olho nu. Em seguida, colocaremos um título nisso envolva-o em um mergulho apenas para forçá-lo a formar uma nova linha porque se torna um elemento de bloco Vamos colocar aqui o recurso da página, texto definido com 300. Podemos copiar e colar abaixo. Desta vez, será um recurso global. Vamos definir o texto do título. Vamos receber mensagens de texto automáticas. A forma como isso funciona é que mudamos o antigo para o título, vamos chamá-lo apenas de espaço reservado Em seguida, temos que referenciá-la, a fonte na página do Github Para um recurso global, você precisa escrever ativos antes que os atos sejam encaminhados. O que vamos fazer é entrar em nossas imagens e copiar outra imagem. Vá para Assets, criaremos uma nova pasta chamada Imagens. Você pode chamar o que quiser colado lá. Os ativos não eram gerados por padrão antes quando você criou um novo projeto Hugo, mas agora são o espaço reservado dois Nossos serão ativos, imagens, espaço reservado dois. Adicionaremos alguns parágrafos ao texto, novamente para transformar dez em um elemento de bloco Então, temos uma nova linha. Também faremos isso na próxima. E aba. Vamos salvar isso e dar uma olhada no navegador. Temos nossas duas imagens chegando. Se inspecionarmos a segunda porque temos a imagem do espaço reservado, a imagem é gerada automaticamente, enquanto o título é o que realmente fornecemos Se você acha que a imagem será um texto alternativo adequado para você, você pode usá-la. Tudo bem. E você também pode gerar um título. Se você colocar o mouse sobre ele, verá que o espaço reservado aparece como título É para isso que serve o texto do título. Você não pode confiar no texto do título porque, em muitos dispositivos móveis, o usuário não pode acessar o texto do título. E o mesmo com as tecnologias assistivas, eles usarão o texto antigo Vamos colocar um pequeno lembrete aqui para imagem de texto antiga automática de Antes de prosseguirmos para a próxima lição, você precisa acessar o controle de origem. Você pode colocar um comentário na lição para concluir. Então você pode fazer um commit. Eu pessoalmente o coloquei em um galho por menos de dois. Mas se deixássemos tudo em um galho e fizéssemos você apertar o botão da pia também. Uma pequena observação lateral, para que não haja confusão aqui: se você estiver tentando processar imagens manualmente com o Hugo, se estiver retirando-as da pasta de ativos, use um caminho relativo à pasta de ativos, por exemplo Aqui temos ativos, imagens, pôr do sol. Você recebeu uma ligação para imagens do pôr do sol. No nosso caso, estamos usando ao pôr do sol. Essa é a forma como o módulo foi configurado. É fácil diferenciar entre local e global. Já para um recurso local, uma imagem, um recurso de página, novamente, é relativo à pasta de páginas. Nesse caso, você está apenas referenciando sunset jpg se estiver na pasta pages É um pouco diferente se você estiver fazendo isso manualmente, mas obviamente agora você está aprendendo como com o módulo, eu simplesmente não quero nenhuma confusão. 4. Imagens de largura responsivas: Esta lição sobre imagens responsivas. E há imagens que mudam de tamanho à medida que você redimensiona a tela ou visualiza a imagem em uma tela menor De volta ao código do Visual Studio, o que você precisa fazer é, na pasta de conteúdo, copiar e colar fixamente. Em seguida, renomearemos essa pasta para responsiva. Vá para o índice e altere fixo para responsivo. Em seguida, o tipo, mudaremos para responsivo porque você está usando um layout diferente Em seguida, vá para os layouts e você pode copiar e colar fixo e renomeá-lo para responsivo Abriremos esse único HTML. O básico das imagens responsivas com este módulo é que, se você se livrar da especificação de largura, o padrão será uma largura responsiva E vou te mostrar isso na página do Github. Temos um exemplo aqui de largura responsiva. E você não precisa fornecer a largura real se quiser, você pode sobrescrevê-la e colocar as larguras que deseja usar as larguras que deseja Se você rolar para baixo, há um exemplo da configuração do site. Por padrão, estamos gerando larguras de 600.900.1300 Isso pode ou não ser adequado para você. Você definitivamente tem que ter isso em mente. Você pode definir os padrões, e eu vou te mostrar isso em um minuto Depois de configurarmos tudo, o que faremos é excluir a diretiva de largura, agora estamos vendo uma imagem responsiva Vou colocar essa primeira imagem em uma coluna. Coloque o Bootstrap aqui , está frio seis. No Bootstrap, há 12 colunas na tela porque já temos nosso contêiner e configuramos a coluna, há 12 colunas na tela Estamos usando seis colunas apenas pela metade se a largura estiver acima do tamanho médio ou maior. E vou mostrar isso em um segundo. Vou deletar essa segunda imagem. Não precisamos disso por enquanto. Mudaremos nossa descrição aqui. Não estou mais preocupado em me preocupar com os recursos da página. É uma imagem responsiva e fazemos cold six. Vamos salvar isso, vamos dar uma olhada no navegador. Aqui está o de Mach, com aproximadamente metade da largura da página. Há algum espaçamento em ambos os lados. E isso é porque estamos usando um recipiente, não um recipiente de fluido. Vamos dar uma olhada no que acontece quando começamos bem. Tem cerca de metade da largura. Há um pouco de acolchoamento em cada lado. À medida que o reduzimos, o preenchimento aumenta quando chegamos ao próximo ponto de interrupção, que teria passado do ponto de interrupção do Excel para Em seguida, vamos para médio, você verá que ela se ajustará a uma imagem em tela cheia que está abaixo da média Agora, na pequena janela de visualização, à medida que continuamos descendo, você verá que a imagem continuará diminuindo a imagem continuará diminuindo E isso é quase o tamanho de um telefone. Se você tem uma imagem como essa, talvez queira que ela tenha toda a largura em um telefone, talvez em um tablet pequeno. Mas, a certa altura, não queremos que fique muito grande. E é por isso que estamos configurando a largura da coluna aqui. Isso é MD ou metade maior. E então, a partir daí, ele começa a cair. Há uma razão pela qual você pode mudar isso. Ou seja, se você mudar de recipiente para fluido de contêiner, daremos uma olhada nisso. Vai ser totalmente fluido, então vamos meia largura e, quando chegarmos abaixo de MD, teremos a imagem responsiva lá Uma coisa que você deve considerar é que, se olharmos nossa imagem e a inspecionarmos, olharmos para a imagem em si, você sabe que ela tem uma classe de fluido IMG que é uma classe de bootstrap E isso foi adicionado por padrão pelo módulo. Diz que a largura máxima da imagem é de 100%. A imagem não ficará maior do que deveria, mas diminuirá se necessário Essa é a largura máxima. Não diz que é a largura, é a largura máxima. E a altura automática significa que a altura apenas aumentará, manterá a proporção conforme você a escala. Agora, há uma opção que está sob classe na configuração. Atualmente, dizia fluido IMG. Você pode ter seu próprio CSS, você pode usar uma estrutura CSS diferente. Você terá que configurar a aula. Enquanto isso, veremos como alterar a largura de volta para nossa página da web Podemos ver que, se atingirmos o ponto máximo antes que ele se rompa, veremos que atualmente está às 06:40 Voltaremos à nossa configuração e definiremos alguns padrões, e definiremos o primeiro Copiaremos os parâmetros, imagem e a inteligência para a configuração Vamos alterá-lo para 640 para nosso exemplo aqui. Tendo em mente que minha tela em particular, tentaremos carregar uma que seja 1,5 vezes maior do que a que temos. Os 900, 1.300 que você pode querer aumentar seus 1300-1400 Depois voltaremos e daremos uma olhada. Troquei a imagem algo mais amplo porque, da forma como esse plugue funciona, se a imagem for muito estreita, na verdade não gera uma imagem mais larga do que a imagem Vamos dar uma olhada. Vamos ver. Temos 64.900.1400 que estão sendo gerados Mas o único problema é que, nesse ponto em que a imagem tem apenas metade da largura, o navegador na verdade não entende a largura da imagem. Se você der uma olhada na tag da imagem, não temos uma propriedade chamada sizes. Precisamos especificar a largura da imagem. Se você não especificar, o navegador presume que é toda a largura da tela No momento, o navegador pode escolher a imagem certa. Quando chegarmos a esse ponto aqui, o navegador provavelmente escolherá uma imagem com toda a largura da tela. Mesmo que a imagem tenha apenas metade da largura, você está baixando uma imagem com o dobro do tamanho que deveria ter. Vamos em frente e vamos tentar configurar os tamanhos. Para fazer isso, você precisa saber como seu CSS funciona. Usamos um Col Md six que se encaixa em 768 pixels. Agora sabemos que quando chegarmos a 768, ela terá metade da largura Nós vamos e vamos colocar tamanhos. Escrevemos assim com 768 x, estamos vendo 50 para a largura de visualização, que é metade da tela Caso contrário, tem 100 de largura. 100 de largura de visualização é o padrão. Se você não especificar, diremos que vou procurar no navegador. Uma coisa a observar é que, se você estiver atualizando o navegador, ele usará a imagem que já foi baixada Se você está testando nessa largura, então você quer testar nessa largura. Você não vai ver o resultado, você ainda vai ver uma imagem muito grande. Por exemplo, se eu atualizar agora, ele ainda baixará a imagem de 1.400 pixels de largura, mas como entrei na rede e desativei a capa, ela realmente capturará a imagem correta quando eu No momento, a imagem tem 224 de largura e ela está capturando a imagem às 06:40. Se colocarmos isso para 370 e recarregarmos, você verá que ela ainda está capturando 640 porque minha tela tem densidade 640 Mas quando chegarmos a uma largura maior, você verá que agora está às 04:48 e está capturando a imagem de 1.400 de Você pode ver em nosso conjunto de origem que temos as três larguras em nossos dois formatos diferentes Para finalizar a aula, certifique-se de fazer um commit do Git Você tem um registro do que está fazendo e certifique-se de sincronizá-lo. 5. Suporte ao Lazysizes: Esta lição é sobre como instalar e usar o módulo de script Java de tamanhos lentos para gerar automaticamente nosso atributo de tamanhos E também ajuda no carregamento lento de imagens de indivíduos. Código Go. A primeira coisa que faremos em nosso exemplo que temos um peso de 20 para o menu. Vamos mudar isso para 30 porque também temos nossa tela inicial. Em seguida, copiaremos nosso conteúdo responsivo e renomearemos a pasta para Lazy Em seguida, entraremos no arquivo markdown e alteraremos o título para Lazy Sizes, e o tipo será Lazy Também devemos mudar o peso para 40, não há conflito. E para que os tamanhos preguiçosos apareçam à direita dos outros dois tipos de imagem em nosso menu, você pode entrar em seus layouts E copiaremos o layout responsivo e o renomearemos para Lay Deixei o link para este site abaixo. É um plug-in chamado Lazy Sizes. Estamos vendo a página do Github para. A maneira mais fácil de executá-lo é a partir de uma CDN. E eu vou te mostrar onde conseguir um link para isso em um momento. motivo pelo qual criamos esta página é para que possamos ver as instruções de como usá-la. Primeiro de tudo, vamos pegá-lo de um CDN na página do Github para o módulo Hugo de imagens responsivas Se você rolar até a seção inferior, temos algumas instruções para tamanhos preguiçosos e temos um link de CDN Como não há nenhum na página de tamanhos preguiçosos , copiaremos isso Em seguida, em nosso projeto, abordaremos os layouts e, em seguida, os parciais e o rodapé do script Vamos colocá-lo acima de todos os outros scripts, para que ele carregue primeiro. Vamos salvar isso e depois copiar o CSS. Também está na página do Lazy Sizer, mas é mais fácil retirá-la da página central de imagens responsivas porque é muito concisa Então, em seu projeto, fecharemos algumas pastas se entrarmos em estática e depois em CSS, há um arquivo CSS e você pode colá-lo. Assim como antes, definimos uma propriedade em nossa imagem. Ao adicionar esse CSS, ele garante que seu CSS seja compatível com o lazy sizer Tamanhos preguiçosos podem detectar a largura da sua imagem. Esta última linha contém apenas quatro figuras de bootstrap, que abordaremos mais adiante no curso Vamos guardar isso. A próxima coisa que precisamos fazer é definir a configuração. Vamos mudar o carregamento para tamanhos de laser. Vamos copiar isso. Já temos parâmetros e imagens configurados. Em seguida, configuraremos os perms do Amel e a imagem que colaremos no carregamento dos tamanhos do laser Na verdade, esse é um padrão que mudará para cada imagem. O que faremos agora, antes de continuarmos, é voltar aos nossos layouts Começaremos com fixo em nossa imagem. Colocamos uma propriedade de carregamento e vamos colocá-la ansiosamente. E isso significa que ele não usará tamanhos lentos e também não usará carregamento lento com o navegador Então, para a próxima, colocaremos o carregamento e tentaremos, e entraremos em nosso responsivo Faremos este com entusiasmo porque está no topo da página. E eu vou te mostrar como isso funciona. Carregando ansioso. Se formos para a largura fixa, redimensionamos nossa tela para que a imagem inferior fique oculta, ficaremos um pouco menores Vamos para a rede. Mude sua aceleração para desacelerar três G e pressione controle ou comando para Você notará que a segunda imagem não será carregada até que a página esteja totalmente carregada. Essa segunda imagem é exibida, está pendente. A linha azul é onde a página está totalmente carregada. De qualquer forma, o navegador o está carregando porque está bem próximo à parte inferior do que está visível Se rolarmos para baixo, a imagem está bem próxima. O navegador o carrega automaticamente para nós. Mas o navegador carregou totalmente todo o conteúdo nessa linha azul e, em seguida, optou por carregá-lo. É assim que o carregamento lento do navegador está funcionando. E se fosse uma imagem maior e estivesse muito mais abaixo, o navegador não carregaria até que você começasse a rolar. Agora, isso é carregamento lento do navegador, e isso não é compatível com todos os navegadores, compatível com a maioria dos navegadores atuais Mas nem todos os navegadores. E vamos configurar tamanhos preguiçosos para lidar com esse carregamento para nós Uma das vantagens de fazer isso é que ele pode nos ajudar a carregar uma imagem de espaço reservado antes que a imagem Em nossa guia Lazy Sizes, escrevemos, clicamos e inspecionamos a imagem. Podemos ver que tem uma fonte SRC de dados. O que acontece é que o Lazy Sizes pega isso e gera uma fonte com Java Script em tempo real quando a página é carregada pela primeira vez Se formos ver a fonte real e dar uma olhada nas imagens, você notará que não há nenhum arquivo fonte. A imagem é apenas uma fonte de dados. Isso vale tanto para a fonte definida na fonte quanto para o IMG Você verá que não há nenhuma fonte, há apenas uma fonte de dados. Na verdade, não é possível que o navegador carregue nenhuma imagem nesse momento até que o plug-in Java Script de tamanhos Lazy e o troque E não fará isso até que a imagem apareça. O que faremos é colocar mais algumas imagens na tela e colocar a primeira como ansiosa, porque essa é uma boa prática Você não quer carregar lentamente as imagens que estão acima da dobra Acima da dobra, há todas as imagens que são visíveis quando a página é carregada pela primeira vez. Você precisa considerar dispositivos móveis e desktops ao mesmo tempo Vamos abordar layouts e tamanhos rendados. Copiaremos essa div, teremos que criar uma nova linha para ela Faça uma linha e cole na sua coluna. Caso contrário, estará lado a lado. Nós não queremos isso. Vamos colocar um segundo espaço reservado Vamos criar um espaço reservado para dois. Em seguida, faremos outra linha, transformaremos esse espaço reservado em três. Em seguida, entraremos em nossa estática e pegaremos 2.3, qualquer que seja o nome que você tenha, e os colocaremos em sua pasta de tamanhos preguiçosos Depois, volte ao seu layout preguiçoso. Precisamos configurar nosso carregamento. Portanto, para este primeiro espaço reservado de imagem, definiremos o carregamento como ansioso Essa é a melhor prática porque está acima da dobra. Você precisa ter uma propriedade de tamanhos lá. E essa é uma das desvantagens de não usar tamanhos preguiçosos: você precisa configurá-los manualmente Mas, para os outros dois, podemos remover os tamanhos porque temos carregamento padrão do carregamento lento na configuração yaml Você verá que o configuramos para tamanhos preguiçosos. Isso configurará automaticamente tamanhos preguiçosos para nós. Vamos salvar isso, vamos entrar no navegador e dar uma olhada. Temos nossas três imagens chegando aqui. Vamos clicar com o botão direito do mouse e inspecioná-los, e daremos uma olhada rápida neles. Primeiro, temos nosso primeiro aqui, carregando ansiosamente. E você verifica seu segundo. Não temos uma propriedade de carregamento lá porque o navegador realmente não lida com isso, ela só vem como uma fonte de dados. E então o Lazy Sizes o troca. A razão pela qual isso acontece é que, na verdade, é uma classe de tamanhos preguiçosos colocados no E isso mudará se formos ver o código-fonte da página e descermos para a terceira imagem, você verá que temos a classe de carregamento lento que muda à medida que os tamanhos modificam as propriedades dessa Vamos fazer com que a tela não seja mais tão alta. Vamos para a rede, vamos acelerá-la velocidade de três G. Lembre-se de que temos o espaço reservado um, o espaço reservado dois e o espaço reservado Faça o controle ou comando para atualizar e só obteremos o espaço reservado em um carregamento Mas quando a página estiver totalmente carregada, você verá que o espaço reservado dois aparecerá porque o Lazy Sizes a está carregando, porque agora está ociosa, os navegadores estão ociosos Se rolarmos um pouco para baixo, você verá que o espaço reservado três aparecerá na parte inferior da tela Isso vai aumentar drasticamente o tempo baixo. Um dos maiores aumentos que temos é o fato de estarmos usando uma imagem da web e existirem apenas 32 kilobytes Esse é um dos jogos de melhor desempenho que temos na web. E isso é algo que é tratado por padrão com esse plug-in Vamos nesta lição, certifique-se de fazer um compromisso. Lição cinco, conclua e controle Enter, que salvará tudo desta lição. E certifique-se de sincronizá-lo. 6. Espaços reservados: Agora, estamos analisando como gerar espaços reservados que serão carregados muito rapidamente enquanto suas imagens grandes ainda aguardam o download completo na página do módulo responsivo do Github Novamente, rolei para baixo até a seção de espaço reservado. Podemos configurar a configuração do espaço reservado. No arquivo de configuração de munição, você deve ter o carregamento em tamanhos lentos para que isso funcione Portanto, você também precisa ter o módulo Javascript de tamanhos de laser também precisa ter o módulo Javascript instalado, o que você já fez. A primeira opção que veremos é P, que significa um espaço reservado para imagem de baixa qualidade Uma versão de qualidade muito baixa da imagem será carregada. Para começar, na verdade, está alinhado ao HTML codificado como texto Então, quando a imagem estiver pronta para carregar, ela será carregada em cima dela. Há algumas opções que podemos definir com isso, duas, mas, por enquanto, teremos que carregar alguns espaços reservados para imagens de baixa qualidade Copiaremos essa configuração lá. Abriremos o configurado. Temos um conjunto de QIP. Em seguida, executaremos o servidor Dev. Se você ainda não o tiver executado, o inspecionaremos Vamos ligar nossa rede lentamente em três G e atualizar. Você verá se há espaços reservados para imagens de baixa qualidade e, em seguida, a imagem será carregada em cima deles. Há algumas configurações adicionais que podemos fazer. Vou apenas copiar tudo, certificar de que está tudo alinhado com o resto. Então, temos a quantidade de desfoque, que é a quantidade de desfoque aplicada ao arquivo Então, temos o fator que analisa quanto as imagens LQ IP são menores do que a menor imagem no amargo St. Tenha cuidado para não aumentar muito o tamanho , pois o tamanho dos arquivos aumentará e você perderá o fator positivo de fazer isso Você acabará diminuindo a velocidade da sua página devido a muitas imagens A seguir, podemos ver uma cor dominante. Se definirmos como dominante, o que isso fará é que Hugo extraia a cor dominante da própria imagem Ele inserirá um pequeno presente que será ampliado. Vamos guardar isso e dar uma olhada. Está recarregando Veja como as cores dominantes estão chegando lá e as imagens estão prestes a aparecer no topo. Essa é outra maneira de fazer isso. Há mais uma maneira de fazer isso que é especificar uma cor se você quiser usar a mesma cor em todo o site Do jeito que funciona atualmente, eu já configurei essas cores e elas são baseadas nas cores cinza do bootstrap Se quiser, você pode realmente criar sua própria cor. E você tem que colocá-lo nesta pasta, e vai ser um presente. Vai ser um presente de dez por dez pixels. Eu não recomendaria nenhum menor porque tive alguns problemas com o dimensionamento adequado E eu não recomendaria nada maior porque você carregará arquivos grandes, o que é desnecessário. Se você está se perguntando como isso funciona, temos essa pasta, imagens de ativos e imagens de espaço reservado Se você procurar na fonte do módulo real, essa é a pasta lá, as imagens estão lá. Mas você pode realmente colocar as imagens no mesmo local em seu projeto Hugo e elas serão adicionadas Analisaremos o uso de um dos padrões. Tudo o que você precisa fazer é nomear o arquivo. Eu já tenho uma lista de nomes lá. Digamos que você queira fazer todos os seus. Gray 300, por exemplo. Você não precisa do presente. Vamos comentar sobre Dominant. Colocamos 300 cinza, guarde isso. E então vamos vê-lo carregar. Atualmente, eles estão chegando como Grey 300. E a imagem carrega na parte superior, o que é bastante usado em sites. Já vi muita carga assim. Então, vamos alterar os diferentes tipos de espaços reservados e ver qual deles você mais gosta Antes de esquecer, certifique-se de fazer um commit do Git. Te vejo na próxima aula. 7. Relação de aspecto: Então, agora vamos ver como criar imagens que estejam em conformidade com uma proporção Eles vão cair para uma proporção específica. Talvez você tenha apenas uma imagem que deseja definir como proporção. Ou você pode ter várias imagens. Por exemplo, uma galeria em que queremos que a proporção seja a mesma para todos os itens. Talvez tenhamos alguns cartões de produtos, por exemplo. O que faremos primeiro é ver nosso exemplo de tamanhos preguiçosos Vamos copiar isso, colar e renomear para ratio Entraremos e mudaremos nosso peso para 50. Este é o quinto item que chamamos de proporção. E vamos mudar o tipo para a proporção. Em seguida, criaremos um layout para a proporção. Copie nosso layout de tamanhos preguiçosos, chame isso de proporção. Eu o abro e depois voltaremos ao documento leia-me na parte superior. Nos exemplos, há um exemplo para cortar uma imagem em uma proporção Este é o exemplo básico, está no Início rápido. O que faremos é copiar a propriedade da proporção. Em seguida, entraremos na primeira foto. Vamos adicionar isso. Vamos fazer disso, por exemplo, um quadrado. Então, vamos fazer um por um. Vamos guardar isso e dar uma olhada. Analisamos a proporção, você verá como a primeira imagem agora é um quadrado, enquanto o resto ainda está na proporção original. A próxima coisa que vou mostrar é como criar várias imagens com a mesma proporção. Podemos fazer isso rapidamente com Hugo. Nós vamos fazer isso, vamos voltar para a página. Temos três marcadores de posição. Vamos tirar mais espaços reservados da pasta estática. Devemos tê-los espalhados, então vamos pegar 45,6 também Temos seis imagens lá. Em seguida, no arquivo de conteúdo da página de proporção, adicionaremos um pouco de Am à capa e a chamaremos de galeria. Em seguida, usamos um traço. Então, estamos criando uma matriz. E faremos RC para o espaço reservado de origem um G. Depois faremos um título e depois copiaremos Em seguida, alteraremos as imagens e os títulos. Depois disso, mostrarei um método de atalho para algumas maneiras de acelerar esse processo Mas é assim que você pode obter texto e título personalizados. O texto antigo será gerado automaticamente para nós. O que faremos agora é nos livrar da terceira depois criar uma nova linha. Certifique-se de ter um div no final, que é o seu contêiner, o último div de fechamento Então, fazemos uma linha, recortamos e colamos o que vamos fazer de forma um pouco diferente. Em vez de especificar a largura da coluna, vamos transformá-la em uma coluna Mas então usaremos uma fábrica e bootstrap chamados coluna de linha Vamos fazer carvão. Queremos ter três, por exemplo, mas talvez você queira ter esse M D acima. Então, nesse caso, você faz com que seja a linha Coles um e depois os papéis M dois e depois o frio três Temos que fazer alguma iteração. Usaremos o alcance. Vamos percorrer a galeria Pm. E terminaremos o intervalo após nossa coluna, reproduzindo a coluna e a imagem Cada vez, nos livraremos desse parágrafo e o colocaremos acima de uma nova chamada Personalizado contém o texto do título. Agora precisamos mudar o contexto para o sinal de $1 porque eles estão dentro de um intervalo. Queremos usar o contexto de nível superior da página neste arquivo, que é o cifrão que eu vou nos dar. A fonte da página será C porque eles estão trabalhando na Tide Gallery. Esse é o contexto. Em vez de antigo, usaremos título, título e, em seguida, definiremos a proporção. Por exemplo, podemos usar o Slice 11 se você quiser uma galeria quadrada E então vamos verificar isso no navegador. Está ótimo. Só precisamos adicionar um pouco de espaçamento entre as imagens. As colunas do bootstrap já têm algum preenchimento à esquerda e à direita Queremos substituir isso porque não é um número redondo. Podemos escolher dois e eu adicionarei uma quantidade fixa em toda a volta. Está parecendo muito melhor. Agora, analiso a capacidade de resposta quando a redimensionamos Em seguida, passa para dois, nós o reduzimos para um tamanho extra pequeno em um tamanho. Vamos dar uma olhada nos tamanhos que podemos precisar. Se mencionarmos isso, você notará que eles são bem pequenos lá. Veremos o quão grandes eles ficam em seu maior ponto quando se dividem em dois Isso está sendo exibido em um tamanho renderizado de 356. Talvez optemos por 360. Em seguida, colocaremos algumas variações mais amplas. Exemplo: aqui, estamos vendo cerca de 06:50 quando ele reduz 523, colocaremos uma fatia de larguras ele reduz 523, colocaremos uma fatia de larguras, digamos 36550. Vamos colocar uma maior para telas de alta densidade, digamos 700 e talvez 1.000. Vamos dar uma olhada. Você precisa acessar a rede e desativar o estojo. Você pode desativar o estojo indole de limitação. Ao recarregá-lo, se quiser que o novo tamanho apareça, você pode ver que é 357, mas está atraindo o 550 devido à densidade selecionada da Se você olhar para cima, verá que temos imagens de tamanhos diferentes sendo inseridas lá, que estão sendo geradas automaticamente. Agora vou mostrar alguns métodos de atalho para gerar uma galeria. A primeira é simplificar um pouco esse processo. Vamos chamá-la de galeria dois, mas desta vez em vez de criar uma matriz dentro da matriz, temos objetos, vamos apenas criar uma matriz. Então, fazemos isso da maneira mais fácil de fazer isso. Você pode fazer várias linhas, mas podemos usar uma única linha. Temos um espaço reservado, vamos apenas copiá-lo e colá-lo para simplificar, 23456 E então você fecha com o colchete, altera os nomes dos arquivos Depois disso, mostrarei um método ainda mais rápido. Você tem todas as fotos em uma pasta, exclua tudo isso. Deixe-me voltar ao nosso layout. Copie essas duas linhas. Esta é uma galeria a partir da matriz, nenhum título definido varia acima da galeria dois. A origem será apenas porque cada vez que examinamos essa matriz, ela retorna apenas um item. E não se chama decadência. É apenas um único item que se torna um título de ponto. Há algumas maneiras de fazer isso. Você poderia simplesmente definir uma imagem genérica se quisesse que elas fossem numeradas. Por exemplo, poderíamos usar o índice de cada iteração em que diz a galeria de parâmetros de pontos Podemos colocar dólar seno, dólar seno e cólon é igual Se você é novato nisso, pode realmente usar o elemento de índice de nome completo. Poderíamos nomear o elemento como você quiser. Você poderia chamar isso de foto, por exemplo. Entendi o contexto aí. Isso ainda funciona. Se quiser, você pode alterá-lo para foto, não importa. Mas para o nosso título, agora temos um índice. Mas o índice começa em zero. Queremos que nossa primeira imagem seja a primeira imagem. O que faremos é um dólar, já que dois pontos são iguais. Usaremos a impressão e criaremos um modelo. O modelo será a porcentagem V do produto entre colchetes. Vamos adicionar um índice e vamos adicionar um a ele que começa com um em vez de zero. Para nosso título, usamos o título do seno do dólar. Então, vamos salvar isso e dar uma olhada no navegador. Aí está nosso segundo set. Agora, o mouse obviamente tem o produto um, produto dois, o produto três. Se inspecionarmos e você olhar o texto alternativo, verá a imagem do produto três que está configurada para nós Se você quisesse, você poderia substituí-lo. Crie outro modelo. Vamos dar uma olhada em mais algumas maneiras de fazer isso. Estou na página de recursos da página Hugo docs. Vou deixar um link para isso. Se você rolar para baixo e observar os diferentes métodos, alguns métodos diferentes serão explorados. A primeira é por tipo, você pode obter todas as imagens de uma página. E o segundo é um pouco mais granular e combina usando um globo, é isso que as estrelas forçam Nós temos nosso caminho e a estrela está. Para qualquer imagem, examinaremos o globo, combinaremos primeiro com o fósforo, copiaremos isso Vou colar abaixo o que fizemos e copiaremos o que temos. Cole-o, usamos essa chamada galeria da pasta. Copiaremos essa correspondência de recursos de pontos. Livre-se dos colchetes em vez dos parâmetros. segunda galeria, colaremos imagens em nossos recursos de pontos e, em seguida, alteraremos as imagens para a galeria ou qualquer pasta da qual você deseja obter as imagens. E criaremos essa pasta, eu a chamarei de galeria, e copiarei e colarei algumas imagens nela, preferência algumas imagens diferentes. Se você os tiver disponíveis, salvaremos isso e daremos uma olhada no navegador. Aí está nossa galeria saindo da pasta. Ele está exibindo todas as imagens na pasta. O outro método é por tipo. Vamos copiar isso. Vamos colar isso temporariamente. Copie as duas linhas. Substitua o que já temos. Galeria a partir do recurso da página. Digamos que daremos uma olhada. Aqui está nossa galeria com todas as imagens de recursos da página. E, como você pode ver, temos imagens com média dupla porque as imagens foram duplicadas como recursos da página Isso é tudo para as proporções. Também incluiu algumas informações extras que você pode usar para implementá-las. Lembre-se de se comprometer antes de prosseguir Nos vemos na próxima lição. 8. Códigos de acesso: Vamos analisar o uso de códigos curtos em arquivos markdown Vamos criar uma nova página. Copiaremos a página de tamanhos preguiçosos. Vamos chamá-lo de markdown porque vamos usá-lo não apenas para códigos de acesso, mas também para não apenas para códigos de acesso, mas também ganchos de renderização que estão chegando Altere nosso título para markdown e, em seguida, eliminaremos o tipo, pois podemos simplesmente usar nosso modelo padrão Se você está se perguntando como isso funciona em layouts, por padrão, temos nosso único HTML em vez de um único HL em um dos arquivos nomeados Porque vamos usar o Markdown para controlar tudo o que está acontecendo e vamos mudar nosso peso para 50, sendo o quinto item Salve isso, então o que podemos fazer é começar com códigos curtos quando eles chegarem à nossa página para o módulo de imagens responsivas Se você usar códigos curtos, temos um exemplo aqui para a proporção. O motivo pelo qual é um dos exemplos é porque mostra como você não precisa usar matrizes ou fatias, que é colocar vírgulas para separar vários valores Copiaremos esse exemplo e, em nosso markdown, colaremos Temos nossa largura configurada lá, vamos colocá-la em uma maior. Novamente, se você não especificar as larguras, ela será usada como padrão Então, vamos colocar 300, por exemplo. Temos nossa proporção e precisamos ter uma fonte de imagem. Vamos colocá-lo, digamos, no espaço reservado seis. Coloque isso em nosso markdown, algo diferente. Podemos até colocá-lo em uma pasta, se quisermos, porque ainda não fizemos isso. Criaremos uma pasta chamada imagens e as arrastaremos para dentro. A fonte serão imagens, espaço reservado para seis Jpg. Se você tiver um espaço em um desses parâmetros, digamos, por exemplo, o antigo tem um espaço na string, você precisa usar double. Mas se não houver ******, eles não são obrigatórios. Em seguida, colocaremos um título para dizer título dois. Estamos lançando um com nosso título de markdown baseado em nosso modelo Estamos no título dois, código curto e proporção 423 e com 900.1.300 pixels Salve isso e vamos dar uma olhada. Aí está nossa imagem agora. Você pode não querer que seja tão largo. Digamos, uma postagem no blog. Vamos dar uma olhada em como podemos restringir a largura. Se formos inspecionar, você verá que temos uma embalagem de MG embrulhando-a Na verdade, podemos mudar isso. Se olharmos nosso exemplo de configuração, você verá que temos a classe wrapper de código curto e ela está atualmente definida como wrapper IMG, mas você pode alterá-la Rapper, se Mas estou saindo do IMG wrapper porque é útil tanto para o gancho de renderização quanto o código curto em que estamos trabalhando no momento Então, de volta ao seu projeto, a configuração do CSS é muito simples. Para este, temos que ter como alvo o rapper do IMG. Há muitas maneiras de fazer isso Uma forma seria exibir o bloco, depois a margem esquerda automática e a margem direita automática que centraliza. Mas também precisamos verificar se a largura é um pouco menor do que a página inteira. Quando estamos em uma tela mais ampla, podemos fazer isso na mídia, exatamente como quando você fornece a largura mínima dos tamanhos, fazemos 768x lá dentro, a largura da repetição e, digamos, 75% da largura da visualização Vamos salvar isso e depois dar uma olhada no navegador que ainda está um pouco largo. Voltaremos e reduziremos para mais. Acho que essa é uma largura melhor para um blog, mas posso mudar a proporção para ser um pouco maior porque é um pouco alta demais. Voltaremos à nossa proporção, diremos, por exemplo, 169 Vamos guardar isso, vamos dar uma olhada. Essa é provavelmente uma boa proporção para uma postagem no blog. Existe uma maneira de usar um código curto que é com um único parâmetro posicional Aqui temos parâmetros de nome. Nós temos, então temos a proporção e assim por diante. Aqui não temos um nome para o parâmetro, é posicional Você pode ter vários parâmetros posicionais. Imagem e também a imagem, apenas código curto. Eles só funcionam com apenas parâmetros individuais. A única coisa é que, se você não configurar seus parâmetros adicionais usando parâmetros de página ou metadados de recursos, que estou aprendendo, provavelmente não será exibido da maneira que você deseja usando os padrões Por exemplo, você não terá nenhum texto antigo, não vou me preocupar em cobrir isso Mas em uma aula futura, quando analisarmos os medidores de página e os metadados, vou inserir isso e mostrar Certifique-se de fazer um commit antes de terminar. Te vejo na próxima aula. 9. Renderize ganchos: Vamos ver como podemos usar a sintaxe padrão de markdown para exibir imagens responsivas nos bastidores Isso é chamado de gancho de renderização, em que Hugo usa o código dos módulos para modificar a forma como as imagens de markdown se comportam Vamos começar com a leitura do módulo de imagens responsivas. Estamos na seção de ganchos de renderização. A primeira coisa que você notará é que temos um exemplo de como você inclui uma imagem com markdown. Nada de especial está acontecendo lá, mas precisamos incluir a configuração para que isso funcione. Pois isso quebrará as imagens que você já configurou ao instalar o módulo. Portanto, é algo que você precisa optar. O item de configuração é render hook true. Vamos continuar e vamos adicionar a imagem para começar e veremos como ela é exibida. E depois prosseguiremos e adicionaremos a configuração e veremos como ela muda nessa página. Estamos apenas trabalhando na página de remarcação. Adicionaremos outro título, adicionaremos o título dois, faremos gancho de renderização usando a sintaxe de imagem markdown, todas as falhas usadas Em seguida, pegaremos esse exemplo, colaremos e pegaremos uma imagem. Vamos usar o espaço reservado cinco. Desta vez, adicionaremos à pasta de imagens o espaço reservado cinco Teremos que configurar nossa imagem. Será o espaço reservado cinco para imagens, porque estamos usando a sintaxe de markdown padrão Na verdade, tem o Intellisense trabalhando lá. Podemos definir o texto da imagem, vamos configurá-lo mais tarde. Guardaremos isso quando olharmos no navegador. Essa é a imagem de marcação padrão. Aqui está nossa imagem padrão chegando. Na verdade, é maior do que a página porque não temos nenhum CSS fornecido. Não é uma imagem responsiva. Se formos inspecionar, é a tag de imagem padrão com a fonte antiga e o título Essa é apenas a falha que funciona com Hugo Você precisaria configurar um pouco de CSS para sua tag de imagem padrão. Talvez você queira ter um pouco de CSS na página também. Talvez seja fácil não afetar todas as suas imagens. Mas vamos em frente e vamos fazer isso muito melhor com Hugo. Obteremos nossa configuração, que é render hook true. Vamos copiar isso. Vamos abrir a configuração. Sim, vamos inserir isso, depois salvá-lo e verificá-lo no navegador novamente. Agora está chegando com o invólucro, e essa também é uma imagem responsiva A única desvantagem é que não podemos definir nenhum parâmetro porque não podemos fazer isso com o gancho de renderização E é isso que vamos abordar na próxima lição. Mas se você der uma olhada, notará que é uma etiqueta de imagem e tem tudo o que você precisa. É isso para esta lição. Essa foi curta, mas vamos expandi-la um pouco. Próxima lição sobre como vamos adicionar configurações. Certifique-se de se comprometer antes de continuar. E nos vemos na próxima lição. 10. Página Params: Agora, analisamos os parâmetros da página para que possamos definir configuração em um nível de página e isso afete todas as imagens na página. Temos uma página, a página de markdown em que estamos trabalhando. E usamos um gancho de renderização, mas na verdade não conseguimos definir nada além do texto antigo e do texto do título. O que podemos fazer é abrir nosso yaml de configuração dentro dos parâmetros, temos a propriedade de imagem E então entramos e definimos nossa configuração. Por exemplo, se você quiser definir todas as larguras em uma página, poderíamos copiá-la É a mesma sintaxe. Você não precisa usar parâmetros porque isso já aparece como parâmetros Então, podemos alterar todas as larguras da página inteira. Digamos que nos livramos das larguras aqui porque sabemos que estamos fazendo três quartos da página, porque é como uma postagem de blog Poderíamos então fazer 640, talvez 900, e definir em 1.300. Vamos definir isso para Então, vamos guardar isso. Verificaremos se isso está funcionando no navegador, verificaremos nossa imagem do gancho vermelho. E estamos adicionando alguma largura, 64.950.300. E isso afetará todas as imagens, a menos que as definamos em um nível de imagem ou em um nível Agora, você não pode definir um nível de imagem para o Red Hook, você pode com o código curto. A próxima coisa que veremos é como definir parâmetros em um nível de metadados um pouco maior do que a página Se você olhar aqui embaixo, temos todos os parâmetros diferentes que você pode definir. E há uma mesa logo no final que permite que você saiba onde você pode ou não colocá-las. Por exemplo, Fonte, você só pode definir isso em linha. Mas então vamos até a proporção e podemos ajustá-la. Podemos definir isso no nível de metadados que estamos prestes a analisar Você pode configurá-lo no nível da página, mas não pode definir a proporção no nível do site. Na verdade, você pode ver onde definir esses diferentes parâmetros em que nível. Agora estamos prestes a passar para a próxima lição, que é configurar nossos metadados Certifique-se de fazer um commit. E nos vemos na próxima lição. 11. Metadados: Agora, estamos analisando a definição parâmetros em um nível de recurso. E isso é apenas para recursos da página, e está usando metadados Estou de volta à página de recursos da página Hugo que usamos anteriormente e colocarei um link para esta lição abaixo Se descermos até a página Metadados de Recursos na parte inferior, isso nos mostra como podemos configurá-la Isso está dentro da sua página real e você precisa inserir recursos de propriedade. Então, a partir daí, podemos configurá-lo. A maneira mais fácil de fazer isso é usar a fonte para começar. É aí que você direciona a imagem. Você pode segmentar vários arquivos, mas, por enquanto, analisaremos apenas o que colocaremos em recursos e, em seguida, inseriremos na fonte Você pode renomeá-lo usando o nome, mas geralmente não entro nisso Você pode definir o título lá ou definir o título nos parâmetros, vamos inserir isso Então, em nosso assunto principal, o que faremos é configurar isso e nos livrar do nome, porque eu não gosto de renomeá-los, isso apenas adiciona um nível extra de fonte de complexidade Analisaremos a segmentação do espaço reservado cinco e, em seguida, teremos que configurar o É como trabalhar com parâmetros de página normais. Temos que trabalhar no espaço do nome da imagem. Em teoria, você poderia simplesmente copiar isso, mas primeiro, no espaço de uma aba nas axilas, teremos que começar Definiremos a proporção para tornar isso óbvio. Vamos configurá-lo para um quadrado 11 na parte inferior do bing. Temos uma longa lista de parâmetros e, na verdade , mostramos onde você pode defini-los como moldes na última lição. Então você tem que olhar as listas, por exemplo. Queremos alterar o carregamento dessa imagem porque será uma falha usar tamanhos preguiçosos Então, queremos apenas configurá-lo como eager. Então, a partir daí, teremos que definir os tamanhos. Começaremos com o carregamento. Vamos definir isso para, por exemplo, usar o navegador padrão. E então temos que definir nossos tamanhos manualmente. Como estamos usando uma imagem responsiva que usamos, não acabamos com nenhum conflito Começaremos com a largura média, observando 768 pixels devido à largura da nossa coluna de fita de bits E vamos configurá-lo para 60% da largura da visualização. Caso contrário, se estivermos abaixo de 768, observe 100% da largura da visualização e, na verdade, colocaremos isso entre aspas Vamos guardar isso, vamos dar uma olhada. Está chegando em um quadrado. E se inspecionarmos, você pode ver que carregamento está ansioso E então temos nossas propriedades de tamanhos que definimos. O navegador saberá qual imagem capturar. Você pode usar isso para qualquer tipo de imagem, seja como um gancho de renderização, seja usando um código curto ou seja uma imagem que você usou em um modelo HTML. É tudo para esta lição. Certifique-se de fazer um commit antes de continuar. E nos vemos na próxima lição. 12. Cifras: Então, agora estamos vendo como gerar figuras usando o módulo de imagens responsivas Analisaremos o conteúdo e copiaremos a página de proporção. Vamos renomeá-lo para Figura. Em seguida, entraremos na página e nomearemos a figura do título. O tipo mudará para figura, eliminaremos o resto dos elementos pré-textuais e excluiremos a galeria. E vamos ficar com talvez três imagens por enquanto. E então mudaremos o peso para 70 porque é o sétimo item do menu. Em seguida, abordaremos os layouts. Vamos pegar o layout da proporção, por exemplo, renomeá-lo para figura Em seguida, entraremos e nos livraremos de todas as fileiras extras que mantêm o contêiner. Em seguida, voltaremos aos nossos documentos. Vamos rolar para baixo até o exemplo da figura. Vamos copiar esse texto. Desta vez, você chama a figura parcial chamada em vez de imagem. Em seguida, excluiremos a imagem parcial. Vamos colá-lo. Vamos apenas corrigir a formatação com a tecla tab Nós apenas verificamos qual imagem vamos atingir. Então, vamos escolher o espaço reservado para três Jpg. Em seguida, título da legenda. Ele vai seguir a imagem, chamá-la de montanhas. E então a legenda é o texto abaixo do título. Vou alterá-lo para Tirado durante minhas férias. O link serve para vincular a imagem real Porque é difícil vincular a imagem que está dentro de uma figura porque você não pode acessá-la em seu modelo, vincule-a por enquanto. Se quiser, você pode excluir o texto alternativo. O padrão alternativo para a legenda, o título da imagem será padronizado para o título da figura Vamos salvar isso e dar uma olhada no navegador. Temos nossa figura chegando aqui, há o título e depois a legenda que escrevemos, clicamos e inspecionamos Temos nossos dois tipos de imagem chegando, o que é ótimo. Nós temos uma figura. A classe é Figure e está configurada para o Bootstrap. Temos nossa legenda de figura com uma classe de legenda de figura E isso é novamente, configurado para o Bootstrap. Nós temos nosso rumo, é a dobra no nível quatro. E eu vou te mostrar como mudar isso em um minuto. E então temos nossa legenda chegando lá. Há mais algumas opções que podemos definir. Por exemplo, se quiser alterar o nível do título, você pode usar essa propriedade lá, legenda da figura, título para o nível Você também pode adicionar uma atribuição com o nome do autor e depois uma página Vamos tentar adicionar a atribuição e o nível. Cole-o. Vamos nos livrar da legenda porque ela está dobrando Vamos usar o nome do autor por enquanto. Tudo isso é parcialmente inspirado na figura oficial de Hugo, mas obviamente não é responsiva como esta Agora temos o nome do autor, você também tem o link do autor chegando lá. Em seguida, mudaremos nosso nível para, digamos, três , por exemplo, farei uma inspeção, agora está chegando como H três Agora mostre como você pode usar um gancho de renderização para gerar uma figura. Voltaremos à nossa página de ganchos de renderização, que está marcada para baixo. Copiaremos esse exemplo de gancho de renderização. Vamos colá-lo e pegar o espaço reservado dois. Desta vez, temos uma figura chegando lá. A largura é restrita porque temos nossa classe de wrapper de imagem definida para ela porque estamos usando um gancho de renderização E configuramos nosso CSS mais cedo. Recebemos nosso título e legenda por meio de metadados. É assim que você usa uma figura com um gancho de renderização. Essa é a primeira lição. Certifique-se de fazer um commit do Git antes de seguir em frente E nos vemos na próxima lição. 13. Suporte ao noscript: Nesta lição, veremos o que acontece se navegador do usuário não tiver Javascript ou se o Javascript estiver desativado. E isso também pode ser comum para usuários com tecnologias assistivas No arquivo leia-me novamente para o módulo de imagens responsivas e procure a seção sem script. O que temos que fazer é ligá-lo. É algo que você precisa optar porque é necessário um pouco de Javascript e CSS. Primeiro de tudo, vamos definir a configuração , vamos ativá-la, vamos entrar no Doyal configurado, vamos ativá-lo A próxima coisa é adicionar o Javascript ou entrar em Layouts e Default, e então ir até o topo da cabeça e depois copiar o script O que isso faz é adicionar uma tag JS. Se o navegador suportar Javascript, você poderá ter uma tag sem JS como classe HTML, se desejar. Se estiver lá, será removido e substituído por JS. Mas se não estiver presente, tudo bem, não é um requisito. Você acabará com uma classe JS em seu HTML. E veremos como isso funciona em um minuto. Vou copiar isso, vamos colar isso. Então, temos um pouco de CSS. Agora você pode carregá-lo como um estilo lá, ou podemos copiá-lo e inseri-lo no arquivo CSS, o que provavelmente é uma ideia melhor. Vamos abordar a estática e o CSS, colocaremos um comentário, sabemos o que é, colaremos isso e salvaremos o script. Em seguida, daremos uma olhada no navegador. Se clicarmos e inspecionarmos, você verá que agora temos a classe de JS aparecendo Por outro lado, se visualizarmos a fonte, você verá que não há nenhuma classe de JS. Agora, o que está acontecendo aqui, como trabalhamos antes, quando a imagem é carregada, se apenas visualizarmos, então entrarmos nas imagens, você notará que a fonte si é o espaço reservado que geramos Depois, temos a fonte de dados, que tamanhos preguiçosos capturarão e substituirão essa O mesmo acontece com nossas fontes. Com nosso conjunto de fontes, o conjunto de fontes de dados será usado para criar um conjunto de fontes no momento certo. O problema é que, se não houver script Java, isso não vai acontecer. É por isso que agora estamos gerando o script sem. Se não houver Javascript, nenhum script realmente funcionará. Mas teremos uma imagem com o espaço reservado e abaixo dela teremos a imagem real Vamos verificar como esse CSS funciona. Porque o CSS realmente desativará essa imagem e habilitará a imagem sem script. Se não houver JS na parte superior, entraremos no comando run e digitaremos Java e, em seguida, você poderá desativar o Javascript e recarregar Vamos rolar para baixo porque a imagem superior, na verdade, não está usando tamanhos preguiçosos Definimos isso como ansioso, clique com o botão direito do mouse em uma das imagens na galeria e você verá por padrão, que o script está realmente sendo destacado Isso porque essa é a imagem que estamos vendo agora, é essa. Não há imagens de script que acabamos de ativar com a configuração. Olhe para a imagem da imagem você verá que a fonte são alguns dados e esse é, na verdade o espaço reservado que está sendo codificado em texto Ele carrega muito rápido. Na fila. A imagem deve ser baixada. Que já faz parte do HTML, mas não há nenhuma imagem lá porque não temos uma classe JS no topo da nossa tag HTML. Porque isso não está lá. O CSS está escondendo esse espaço reservado Dessa forma, podemos ver nosso no-script. Se desativarmos o CSS, veremos o que acontece. Entraremos e controlaremos K C para sair. Em seguida, atualizaremos e você verá que temos nossos espaços reservados e as imagens sem script que ativamos nossa configuração sem script, mas não incluímos o CSS ou você pode esquecer o JS, por exemplo Você vai acabar com duplas. Nós não queremos isso. Vamos reativar nosso CSS. Isso é tudo para a aula. Certifique-se de fazer um commit.