Traitement d’image et images réactives avec Hugo le générateur de site statique – Tous les niveaux

1. 1 intro: Bonjour, je m'appelle Sean. Je suis développeur web et spécialiste des sites statiques. Ce cours traite de la génération d' images réactives avec Hugo, le générateur de sites statiques. Hugo intègre de puissantes capacités de traitement d'image, mais la gestion et la génération images réactives prennent du temps et deviennent répétitives. J'ai écrit un module pour automatiser ce processus, et ce cours vise à vous guider tout au long du processus de configuration et d'utilisation. Dans le cours, nous étudions des images à largeur fixe et réactives. Examinez les balises HTML pour les images, les images et les figures. Nous utiliserons des tailles différées pour charger les images en différé dans tous les navigateurs et générer automatiquement la propriété des tailles adaptée aux images. Nous allons créer des espaces réservés pour le chargement des images afin d'accélérer le chargement des pages Nous allons recadrer intelligemment les images selon différents rapports hauteur/largeur Nous utiliserons des codes courts et des hooks de rendu pour générer des images en markdown. Et nous examinons la configuration en ligne et via ressources de la page d' accueil métadonnées des ressources de la page d' accueil et la configuration du site. N'oubliez pas que si vous avez besoin d'aide, vous pouvez toujours m'envoyer un message Seem in the course. 2. 2 installation: La première chose à faire est télécharger le début du modèle. J'ai laissé un lien pour cela. Si vous cliquez sur le bouton du code vert, vous pouvez le télécharger sous forme de zip. C'est le moyen le plus simple de le faire. Prenez une copie de ce fichier zip et extrayez-le, puis nous allons commencer. Une fois que vous l'avez ouvert dans Visual Studio Code, vous devrez accéder au terminal. Nous allons l'initialiser en tant que dépôt Git afin que vous puissiez enregistrer votre progression Vous pouvez également copier-coller un lien vers votre dépôt Git. Si vous avez besoin d'aide, utilisez la commande git qui l'initialisera en tant que dépôt Et vous verrez apparaître le dossier dot git. Ensuite, sur la gauche, nous avons une liste de fichiers qui doivent être validés pour être obtenus. Il existe un fichier dot git ignore. C'est très important car cela indique à git les fichiers à ne pas valider dans le dépôt Git, par exemple les modules de nœuds. Si vous deviez importer des packages, par exemple, nous allons parler de Lazy Sizes. Vous ne voulez pas le transférer dans votre dépôt Git car cela en augmentera considérablement la taille. Ensuite, j'utilise Github Desktop pour l'étape suivante Lorsque Github Desktop sera disponible sur Mac, je vais dans le fichier et j'ajoute référentiel local, puis vous choisissez le chemin du Ensuite, une fois que vous avez cliqué sur le dossier dans lequel se trouve votre projet, vous cliquez sur Sélectionner un dossier et il pourra être ajouté à Github Desktop car vous avez déjà exécuté la commande git init Je pense que c'est beaucoup plus facile comme ça. Vous devez ensuite effectuer votre premier commit dans la zone de résumé, nous pouvons écrire le modèle de validation du projet. Ensuite, vous devez le publier. Si tu le souhaites, tu peux le garder privé. Je vais rendre le mien public pour que vous puissiez le voir. Si vous en avez plusieurs, si vous avez configuré des organisations à cet effet, si vous choisissez votre organisation, vous n' avez probablement pas d'organisations, vous n'aurez probablement pas cette option ici. Tu peux mettre une description. Je vais appeler mon cours Skillshare sur les images réactives Hugo que vous Maintenant, si vous allez dans le menu du dépôt et que vous le visualisez sur Github, nous pouvons voir à quoi cela ressemble. Nous pouvons également accéder au lien et vous pouvez le coller si vous avez besoin d'aide Et il y a le dépôt visible sur Github, et je vais également mettre ce lien ci-dessous. Vous pouvez obtenir de l'aide à chaque étape. Vous pouvez voir les progrès que j'ai réalisés. Je vais mettre la progression dans la section des branches. Je ne vais pas vous montrer personnellement comment valider dans les branches à chaque fois, mais je vous rappellerai à la fin de chaque leçon de faire un commit et je vous montrerai comment cela fonctionne. Je dois ajouter le module d'images réactives. Et cela va beaucoup accélérer les choses car j'ai déjà écrit personnellement tout le code pour vous. Tout ce que vous avez à faire est de le mettre en œuvre. J'ai laissé le lien ci-dessous vers le module de traitement d'image. Avant de commencer, assurez-vous d'appuyer sur le bouton étoile. Cela m'aide à savoir combien de personnes l'utilisent réellement. , c'est un module Hugo, et si vous l'ajoutez à votre projet, il se chargera de tout le traitement pour vous. Et il imprimera même les étiquettes. Ce qu'il fait Lorsque vous passez aux images que vous souhaitez placer sur votre site Web et que vous indiquez les largeurs que vous souhaitez, il génère en fait plusieurs largeurs pour différentes largeurs d'écran Ou si les images sont fixées avec, cela générera l'image à différentes densités Pour un écran haute densité, supposons que vous utilisiez un écran Retina sur un appareil mobile, vous voulez qu'il soit au moins deux fois plus dense, le double, car la résolution de l'écran est beaucoup plus grande. Si vous faites défiler l'écran vers le bas, nous avons les instructions d'installation ici. Avant cela, nous devons initialiser notre projet pour accepter les modules Hugo Nous allons utiliser Hugo pour le modifier. Vous devez ensuite fournir le chemin d'accès à votre projet où il est stocké sur Github ou un autre fournisseur Git Nous allons au terminal et Hugo Mood dans mon projet stocké sur GitHub.com, supprime le futur module d'images adaptatives Hugo adaptatives Une fois cette opération exécutée, vous verrez que nous avons maintenant un bon fichier. En haut, il y a l'adresse du dépôt pour ce projet. Ensuite, il indique la version de Go que vous avez installée. Vous devez avoir installé Golang. Maintenant, le moyen le plus simple de l'installer sur Windows, j' utiliserais du chocolat. Et la commande est Chocolate Install. Si vous êtes sous Linux ou Mac, je préparerais l'installation de Go. Chocolate doit être installé sur Windows et Brew doit être installé sur Linux ou Mac pour que cela fonctionne. Je recommande également cette méthode pour Hugo. Si vous recevez mon cours d'introduction à Hugo, vous verrez comment cela fonctionne. Maintenant que nous avons configuré notre fichier go mod, nous devons procéder à l' importation du module. Nous allons ajouter le module à la configuration. Nous avons ici un exemple de la façon de l'ajouter. Si vous avez d'autres modules, vous devrez vous assurer de ne pas les doubler et vous devrez simplement ajouter le chemin supplémentaire. Cette dernière ligne, comme nous n'avons pas de configuration de module et d'importation, nous allons l'ajouter à notre tableau de configuration. Nous allons le coller dedans. Sauvegardez-le. La dernière étape consiste à installer le module avec Hugo mod Get. Si vous souhaitez mettre à jour vos modules, vous pouvez mettre un tiret U à la fin. Nous allons l'exécuter et il va récupérer le module dans le fichier de configuration qui a été installé Si vous y allez, vous y verrez la version du package. Il fait également référence à un autre package appelé Image in common, que j'ai utilisé dans des images réactives Si vous vous demandez pourquoi il y a un package supplémentaire , New God, vous verrez que nous n'avons qu' un seul module requis. Ensuite, vous devez obtenir des images d' espace réservé pour le site Web que nous sommes sur le point de créer Je recommande de placer la plupart d'entre eux en orientation paysage. Je recommande Unsplash.com ou il existe d'autres fournisseurs lorsque vous les téléchargez. Si vous êtes sur Unsplash, la meilleure option est de cliquer sur l'image et de spécifier la taille réelle que vous Je dirais moyen ou grand, mais ne faites absolument pas d'original ni de petit. Si vous faites de petites images, cela ne vous empêchera pas de redimensionner votre projet avec ce que nous faisons. Ensuite, une fois que vous aurez téléchargé toutes vos images, placez-les dans le dossier statique et le dossier IMG Ce n'est pas de cela que nous allons réellement les obtenir, mais c'est un endroit où vous pouvez les stocker temporairement maintenant que tout est configuré, y compris nos images réservées Nous allons appuyer sur le bouton de contrôle de source C'est le troisième sur mon écran. Cela est inclus par défaut dans le code de Visual Studio. La dernière fois, nous avons effectué un commit via Github desktop. Nous allons maintenant utiliser le code Visual Studio car il est beaucoup plus rapide. Assurez-vous que tout est conforme aux modifications, puis nous pourrons le mettre dans un message. La première chose que nous allons faire est d' initialiser et d'ajouter un module. Ce que nous allons faire, c'est maintenir la touche Shift enfoncée et cliquer sur les trois premiers éléments. y a des points sauvages et le condamné clique avec le bouton droit de la souris et sera mis en scène Désormais, seuls les éléments de l'étape seront réellement validés. Le message pour ces trois personnes, il est important que vous vous assuriez que le message est exact. Nous allons nous engager à le faire. Maintenant que nous avons apporté des modifications, nous ajoutons des images de remplacement, nous allons les valider Ensuite, lorsque nous aurons terminé la leçon, vous devrez cliquer sur Synchroniser les modifications pour que les téléchargements soient effectués sur Github, vous devrez cliquer sur Synchroniser les modifications pour que les téléchargements soient effectués sur Github, sinon ils resteront sur votre ordinateur C'est très bien Mais c'est bien de le sauvegarder sur Github et aussi si vous devez m'envoyer un lien vers votre travail pour obtenir de l'aide, c'est comme ça que vous allez procéder 3. Images en largeur fixe: Cette leçon porte sur la correction par des images. Il s'agit d'images qui ne sont pas redimensionnées, lorsque vous redimensionnez l'écran ou si vous affichez la page sur un écran plus petit pour générer une image fixe Nous sommes sur la page Lisez-moi depuis Github, juste pour vous rappeler que le lien est vers celui ci-dessous. Nous allons nous en inspirer pour le démarrage rapide et nous examinons l'exemple de la largeur fixe et des ressources de page. Le premier n'est qu'une référence. Vous pouvez simplement générer une étiquette d' image si vous le souhaitez. Mais d'une manière générale, le pitch tag sera plus utile vous sera plus utile car il est beaucoup plus facile fournir plusieurs formats, et j'y reviendrai dans un instant. Ce que nous allons faire, c'est copier ce code si vous le souhaitez. Nous allons aborder notre projet. Nous aborderons le contenu et les informations à ce sujet. Ce que nous allons faire, c'est renommer ce dossier en Fixed. Ensuite, nous allons entrer dans le fichier lui-même et renommer le titre en Fixed with Image Nous allons supprimer le contenu, nous allons lui apporter une sorte de correctif. Cela signifie que nous disons à Hugo de rechercher la mise en page dite fixe. Nous allons dans le dossier des mises en page, créer un nouveau dossier appelé Fixed Nous allons passer à la valeur par défaut et nous copierons le HL unique dans fixed. Il va maintenant chercher ce dossier. Nous allons revenir dans notre index M D pour corriger, vous devez copier une image. Nous allons dans static et IMG et choisissons une image. Copiez-le, ne le coupez pas, vous en aurez besoin pour un autre exemple, collez-le dans Fixed. Ensuite, ce que nous pouvons faire, c'est de quelques manières que vous pouvez le faire cela sera intégré dans notre code HTML unique pour correction. Et nous allons commencer par le retour de notre code sur la page Github. Faites défiler la page vers le bas pour accéder aux exemples d'utilisation, également appelés Quick Start. Nous allons examiner l'exemple partiel à largeur fixe. Maintenant, nous n'allons pas générer de balises IMG avec l'IMG uniquement partiellement. Nous allons opter pour la partie image parce que nous voulons ajouter une balise photo, nous allons copier cet exemple. Ensuite, sous le contenu, nous le collerons. Et vous pouvez louer le texte et tabulation pour le mettre en forme correctement si vous le souhaitez. Actuellement, la source est définie sur une image qui indique quelque chose de temporaire. Si vous appuyez sur deux ou si vous cliquez avec le bouton droit de la souris pour renommer, nous pouvons copier le nom du fichier Ensuite, nous allons le coller dans la source. Notre largeur est fixée à 300 pixels. Ne le mettez pas entre guillemets, sinon cela ne fonctionnera pas et deviendra une chaîne de caractères. Il faut que ce soit un chiffre. Nous avons défini notre texte Alt. Vous devez disposer d'un texte Alt. Et je vais vous montrer une autre façon de le faire lorsque nous examinerons les ressources mondiales. Parce que nous examinons actuellement les ressources de page, car l'image se trouve dans le même dossier que votre page. Ctx est l'abréviation de Context. Vous remarquerez que nous avons un titre. Le titre vient de la page, et c'est peu parce que c'est cette page, elle n'est pas ailleurs. Nous avons également obtenu du contenu et nous devons fournir ce point au partiel. Si, par exemple, vous aviez une fourchette et que vous dépassez quelque chose, pour que le contexte de la page se situe dans cette fourchette, vous devez le remplacer par le signe 1, car le signe dollar se situe au niveau supérieur de la page, il sort de la fourchette, du W ou de toute autre manière de modifier le contexte. Mais ce n'est pas ce que nous faisons pour le moment. Disons que dans les scripts NPM, je vous ai écrit un script appelé dev Cela démarrera le serveur Hugo. Assurez-vous que Hugo est installé. Hugo n'a pas été installé avec NPM. Vous avez été installé dans le monde entier sur votre système. Une fois le serveur de développement démarré, vous pouvez contrôler le clic, l' ouvrir dans le navigateur. Une fois que vous avez ouvert le navigateur avec une image corrigée, vous pouvez cliquer dessus avec le bouton droit de la souris et vous inspecter sous la forme d'une étiquette photo générée automatiquement pour nous. Nous avons notre source là-bas. Et le premier, le Web, s'il s'agit du Web, c' est parce que le Web est beaucoup plus petit et se charge beaucoup plus rapidement. De nos jours, la plupart des navigateurs le supportent. Mais nous avons un deuxième format, un format alternatif, le JP, qui est le format original qui est beaucoup plus volumineux et dont le chargement est beaucoup plus lent. Mais nous l'avons ajouté comme solution de secours au cas où le navigateur ne le supporterait pas Si vous regardez le haut ou l'un des exemples, vous remarquerez que nous avons un exemple en x , puis un exemple en deux X. Si vous regardez la taille, vous remarquerez que nous en avons 300 pour la première taille et 600 pour la deuxième taille. Si vous placez votre souris sur la balise image, qui représente quatre points de plus pour les navigateurs qui ne prennent pas en charge les images, vous remarquerez que la taille réelle, si vous considérez l'image intrinsèque, est de 600 x 400. C'est le double de la taille. Ce sont les deux x. C'est parce que mon écran a une densité 1,5 fois supérieure. D'après la façon dont mon écran s'affiche, la résolution est légèrement supérieure à la norme. C'est ainsi que fonctionnent la plupart des appareils. il est très important Si vous fournissez une image à largeur fixe, fournir ces autres densités Certains écrans peuvent atteindre 2,5, mais on peut soutenir qu'il ne sert à rien d'ajouter un trois X parce que vous augmentez simplement considérablement la taille du fichier Même s'il s'agissait d'une résolution d'affichage de 2,5 ou trois fois, elle pourrait ne pas être perceptible à l'œil nu. Ensuite, nous allons mettre un titre dessus, enrouler dans un creux juste pour le forcer à suivre une nouvelle ligne car il devient un élément de bloc. Nous allons mettre ici la ressource de la page, dont le texte est défini sur 300. Nous pouvons le copier et le coller ci-dessous. Cette fois, il s' agira d'une ressource mondiale. Nous allons définir le texte du titre. Nous allons recevoir des SMS automatiques. La façon dont cela fonctionne est de remplacer l'ancien par un titre, nous l'appellerons simplement placeholder Ensuite, nous devons le référencer, le code source sur la page Github Pour une ressource globale, vous devez écrire des actifs avant que les actes ne soient tracés. Ce que nous allons faire, c'est entrer dans nos images et copier une autre image. Accédez à Assets, nous allons créer un nouveau dossier appelé Images. Vous pouvez appeler ce que vous voulez, collé dedans. Les actifs n'étaient pas générés par défaut auparavant lorsque vous créiez un nouveau projet Hugo, mais il s'agit désormais de l'espace réservé 2 Nous serons des actifs, des images, un espace réservé deux. Nous allons ajouter quelques paragraphes au texte, encore une fois pour en faire un élément de bloc de dix. Nous avons donc une nouvelle ligne. Nous le ferons également pour le prochain. Et un onglet. Nous allons enregistrer cela et jeter un œil dans le navigateur. Nous avons nos deux images à venir. Si nous inspectons le second car nous avons une image ou un espace réservé, l'image est générée automatiquement, alors que le titre est celui que nous avons réellement fourni Si vous pensez que l'image sera un texte alternatif approprié pour vous, vous pouvez l'utiliser. C'est très bien Et vous pouvez également générer un titre. Si vous passez votre souris dessus, vous verrez que l'espace réservé apparaît en tant que titre C'est à cela que sert le texte du titre. Vous ne pouvez pas vous fier au texte du titre, car sur de nombreux appareils mobiles, l'utilisateur n' a pas la possibilité d' accéder au texte du titre. Et il en va de même pour les technologies d'assistance, elles vont utiliser l'ancien texte Mettons un petit rappel ici pour l' ancienne image texte automatique de. Avant de passer à la leçon suivante, vous devez accéder à votre contrôle de source. Vous pouvez ajouter un commentaire à cette leçon pour la terminer. Ensuite, vous pouvez effectuer un commit. Personnellement, je l'ai mis dans une agence pour moins de deux. Mais si nous laissions tout cela sur une seule branche et que nous vous obligions à appuyer également sur le bouton du lavabo. Petite remarque, pour éviter toute confusion, si vous essayez de traiter manuellement des images avec Hugo, si vous les sortez du dossier des actifs, utilisez un chemin relatif si vous essayez de traiter manuellement des images avec Hugo, si vous les sortez du dossier des actifs, au dossier des actifs, par exemple, utilisez un chemin relatif au dossier des actifs. Ici, nous avons des actifs, des images, un coucher de soleil. Vous avez reçu un appel pour des images du coucher du soleil. Dans notre cas, nous l'utilisons au coucher du soleil. C'est ainsi que le module a été configuré. Il est facile de faire la différence entre le local et le mondial. Alors que pour une ressource locale, une image, une ressource de page, encore une fois, c'est relatif au dossier des pages. Dans ce cas, vous faites simplement référence Sunset JPG s'il se trouve dans le dossier Pages C'est légèrement différent si vous le faites manuellement, mais il est évident qu'en ce moment vous apprenez comment utiliser le module, je ne veux juste pas de confusion. 4. Images en largeur réactive: Cette leçon sur les images réactives. Et certaines images changent de taille lorsque vous redimensionnez l'écran ou que vous affichez l'image sur un écran plus petit De retour dans le code de Visual Studio, ce que vous devrez faire, c'est dans le dossier de contenu, vous pouvez copier-coller corrigé. Ensuite, nous allons renommer ce dossier en responsive. Accédez à l'index et passez de fixe à réactif. Ensuite, nous passerons au type responsive car vous utilisez une mise en page différente. Ensuite, allez dans les mises en page et vous pouvez copier et coller correctif et le renommer en responsive Nous allons ouvrir ce code HTML unique. La base des images réactives avec ce module est que si vous vous débarrassez de la spécification de largeur, la largeur sera définie par défaut sur une largeur réactive. Et je vais juste vous le montrer sur la page Github. Nous avons ici un exemple de largeur réactive. Et vous n'avez pas à fournir la largeur réelle si vous le souhaitez, vous pouvez la remplacer et vous pouvez entrer les largeurs que vous souhaitez utiliser Si vous faites défiler la page vers le bas, trouverez un exemple de configuration du site. Par défaut, nous générons des largeurs de 600 900 1300 pixels. Cela peut vous convenir ou non. Vous devez absolument garder cela à l'esprit. Vous pouvez définir les valeurs par défaut, et je vous le montrerai dans une minute. Une fois que tout est configuré, ce que nous allons faire, supprimer la directive de largeur Nous avons maintenant affaire à une image réactive. Je vais envelopper cette première image dans une colonne. Mets Bootstrap ici, il fait froid. Dans Bootstrap, il y a 12 colonnes à l'écran car nous avons déjà notre conteneur et notre colonne de configuration, il y a 12 colonnes à l'écran Nous n'utilisons six colonnes que la moitié si la largeur est supérieure ou supérieure à la taille moyenne. Et je vais vous le montrer dans une seconde. Je vais supprimer cette deuxième image. Nous n'en avons pas besoin pour le moment. Nous allons modifier notre description ici. Je n'ai plus peur de me soucier des ressources des pages. C'est une image réactive et nous faisons du cold six. Nous allons enregistrer cela, nous allons jeter un œil dans le navigateur. Voici celle de Mach, large d'environ la moitié de la page. Il y a un certain espacement de chaque côté. Et c'est parce que nous utilisons un contenant, pas un contenant de liquide. Voyons ce qui se passe lorsque nous partons de très loin. C'est environ la moitié de la largeur. Il y a un peu de rembourrage de chaque côté. Au fur et à mesure que nous le réduisons, le rembourrage augmente lorsque nous arrivons au point d'arrêt suivant, qui serait passé du point d' arrêt Excel à un point d'arrêt élevé Ensuite, nous passons à la valeur moyenne, vous verrez que l'image s' affichera en plein écran située en dessous de la moyenne. Maintenant, dans la petite fenêtre d'affichage, fur et à mesure que nous descendons vers le bas, vous allez voir l'image continue de rétrécir avec l'écran Et c'est presque la taille d'un téléphone. Si vous avez une telle image, vous voudrez peut-être l'afficher en pleine largeur sur un téléphone, peut-être sur une petite tablette. Mais en fin de compte, nous ne voulons pas qu'il devienne trop gros. C'est pourquoi nous le réglons sur la largeur de colonne qui s'y trouve. C'est MD ou une plus grande moitié. Et puis à partir de là, il commence à s'effondrer. Il y a une raison pour laquelle vous pouvez changer cela. C'est si vous passez d'un contenant à un liquide pour récipient, nous examinerons cela. Cela va être complètement fluide, donc nous optons pour une demi-largeur, puis lorsque nous descendons en dessous de MD, nous avons juste une image réactive. Une chose que vous devez prendre en compte est que si nous regardons notre image et que nous l'inspectons, nous examinons l'image elle-même, vous savez qu'elle possède une classe de fluide IMG qui est une classe bootstrap Et cela a été ajouté par défaut par le module. Il indique que la largeur maximale de l'image est 100 %. L'image ne sera pas plus grande qu'elle ne le devrait, mais elle diminuera s'il le faut. C'est la largeur maximale. Il ne dit pas que c'est la largeur, c'est la largeur maximale. Et la hauteur automatique signifie que la hauteur sera simplement redimensionnée, rapport hauteur/largeur au fur et à mesure que vous la redimensionnez. Il existe maintenant une option qui est sous-classée dans la configuration. Actuellement, il est écrit IMG Fluid. Vous pouvez avoir votre propre CSS, vous pouvez utiliser un autre framework CSS. Tu devras configurer le cours. Mais en attendant, nous allons voir comment modifier la largeur de notre page Web. Nous pouvons voir que si nous atteignons le point maximum avant qu'il ne s'enclenche, nous verrons qu'il est actuellement à 6 h 40 Nous allons revenir à notre configuration et nous allons configurer certaines valeurs par défaut, et nous allons définir la première à 640 Nous copierons les paramètres, l'image et les informations dans la configuration Nous allons le changer en 640 pour notre exemple ici. En gardant à l'esprit mon écran en particulier, nous essaierons d'en charger un 1,5 fois plus grand que celui que nous avons. Les 900, 1 300, vous pourriez vouloir augmenter votre 13001400, par exemple Ensuite, nous y retournerons et nous y jetterons un œil. J'ai remplacé l'image par une image plus large parce que la façon dont fonctionne ce branchement, si l'image est trop étroite, elle ne génère pas réellement une image plus large que ce que l' image elle-même Nous allons y jeter un œil. Voyons voir. Nous avons 64 900.1400 qui sont générés comme Mais le seul problème, c'est qu' à ce stade où l'image ne fait que la moitié de sa largeur, le navigateur ne comprend pas la largeur de l'image. Si vous regardez la balise image, nous n'avons pas de propriété appelée sizes. Nous devons spécifier la largeur de l'image. Si vous ne le spécifiez pas, le navigateur suppose qu'il s'agit de toute la largeur de l'écran. À l'heure actuelle, le navigateur est capable de choisir la bonne image. Lorsque nous en arriverons là, le navigateur choisira probablement une image sur toute la largeur de l'écran. Même si l'image ne fait que la moitié de sa largeur, vous téléchargez une image deux fois plus grande que ce qu'elle devrait être. Allons-y et nous allons essayer de configurer les tailles. Pour ce faire, vous devez connaître le fonctionnement de votre CSS. Nous avons utilisé un Col Md six qui prend des photos à 768 pixels. Maintenant, nous savons qu' une fois que nous aurons atteint 768, ce sera la moitié de la largeur. Nous allons y aller et nous allons choisir des tailles. Nous écrivons ainsi avec 768 x, nous cherchons 50 pour la largeur de vue, soit la moitié de l'écran. Sinon, c'est une largeur de 100. La largeur de vue de 100 est la valeur par défaut. Si vous ne le spécifiez pas, nous dirons que je vais regarder dans le navigateur. Une chose à noter est que si vous actualisez le navigateur, il utilisera l'image déjà téléchargée. Si vous testez à cette largeur, vous souhaitez tester à cette largeur. Vous n'allez pas voir le résultat, vous allez quand même voir une très grande image. Par exemple, si je l'actualise maintenant, l'image de 1 400 pixels de large sera toujours téléchargée , mais comme je suis passé sur le réseau et que j'ai désactivé la case, elle récupérera la bonne image lorsque je la rechargerai l'heure actuelle, l'image mesure 224 de large et elle saisit l'image à 6 h 40. Si nous ramenons cela à 370 et que nous la rechargeons, vous verrez qu'elle en saisit toujours 640 parce que la densité de mon écran est de 1,5 pixel Mais au fur et à mesure que nous atteignons une largeur plus large, vous verrez qu'il est maintenant à 04:48 et qu'il saisit l'image de 1 400 pouces Vous pouvez le voir dans notre ensemble de sources, nous avons les trois largeurs disponibles dans nos deux formats différents Pour terminer la leçon, assurez-vous d'effectuer un commit Git. Vous avez un enregistrement de ce que vous faites et assurez-vous de le synchroniser. 5. Lazyze le support: Cette leçon traite de l'installation et de l'utilisation du module de script Java lazy sizes pour générer automatiquement notre attribut sizes. Et aidez également à charger les images en différé par des individus. Code Go. La première chose que nous allons faire pour notre exemple, est que nous avons un poids de 20 pour le menu. Nous allons passer ce chiffre à 30 car nous avons également notre écran d'accueil. Nous copierons ensuite notre contenu adaptatif et renommerons le dossier en Lazy Sizes. Ensuite, nous allons entrer dans le fichier Markdown et nous allons changer le titre en Lazy Sizes, et le type sera Lazy Sizes Nous avons également changé le poids à 40, il n'y a pas de conflit. Et pour que Lazy Sizes apparaisse à droite des deux autres types d'images de notre menu , vous pouvez les intégrer à vos mises Et nous copierons la mise en page réactive et nous la renommerons en Lay Sizes. J'ai laissé le lien vers ce site ci-dessous. Il s'agit d'un plugin appelé Lazy Sizes. Nous examinons la page Github pour. Le moyen le plus simple pour nous de l' exécuter est à partir d'un CDN. Et je vais vous montrer où trouver un lien pour cela dans un instant. Nous avons créé cette page afin pouvoir consulter les instructions d'utilisation. Tout d'abord, nous allons le récupérer sur un CDN sur la page Github du module Hugo d'images adaptatives Si vous faites défiler l'écran jusqu'à la section inférieure, nous avons quelques instructions pour Lazy Sizes et nous y avons un lien CDN Comme il n'y en a pas sur la page Lazy Sizes, nous allons le copier. Revenons ensuite à notre projet, nous aborderons les mises en page, puis les partiels et le pied de script Nous allons le placer au-dessus de tous les autres scripts, afin qu'il se charge en premier. Nous allons enregistrer cela, puis nous copierons le CSS. Il se trouve également sur la page Lazy Sizer, mais il est plus facile de le retirer de la page du hub contenant des images réactives car elle est très concise Ensuite, dans votre projet, nous fermerons simplement certains dossiers si nous passons au format statique puis au CSS Il existe un fichier CSS dans lequel vous pouvez le coller. Comme précédemment, nous avons défini une propriété sur notre image. En ajoutant ce CSS, cela garantit que votre CSS est compatible avec Lazy Sizer Lazy Sizes peut détecter la largeur de votre image. Cette dernière ligne ne contient que quatre figurines bootstrap, auxquelles nous reviendrons plus tard dans le cours Nous allons enregistrer cela. La prochaine chose que nous devons faire est de configurer la configuration. Nous allons remplacer le chargement par des tailles laser. Nous allons le copier. Nous avons déjà configuré les paramètres et l'image. Ensuite, nous allons configurer les perms d'Amel et l'image que nous collerons lors du chargement est de la taille du laser. Il s'agit en fait d'une valeur par défaut qui va changer pour chaque image. Ce que nous allons faire maintenant, avant de continuer, c'est revenir à nos mises en Nous allons commencer par corriger dans notre image. Nous avons ajouté une propriété de chargement et nous y mettrons avec impatience. Cela signifie qu'il n' utilisera pas de tailles paresseuses et qu'il ne se chargera pas non plus avec le navigateur. Ensuite, pour le suivant, nous allons lancer le chargement et nous essaierons, et nous passerons à notre responsive. Nous allons le faire avec impatience car il figure en haut de la page. Et je vais vous montrer comment cela fonctionne. J'ai hâte de charger. Si nous passons à la largeur fixe, nous redimensionnons notre écran pour que l'image du bas soit masquée, nous serons un peu plus courts Nous allons passer au réseau. Réglez votre accélérateur pour ralentir de trois G et appuyez sur Ctrl ou Commande pour recharger Vous remarquerez que la deuxième image ne se charge pas tant que la page n'est pas complètement chargée. Cette deuxième image apparaît, elle est en attente. La ligne bleue indique l'endroit où la page est complètement chargée. Le navigateur est en train de le charger de toute façon car il se trouve tout près du bas de ce qui est visible Si on fait défiler la page vers le bas, l'image est assez proche. Le navigateur le charge automatiquement pour nous. Mais le navigateur a complètement chargé tout le contenu situé sur cette ligne bleue, puis il a choisi de le charger. C'est ainsi que fonctionne le chargement différé du navigateur. Et s'il s'agissait d'une image plus grande et qu'elle se trouvait beaucoup plus bas, le navigateur ne se chargerait pas tout tant que vous ne commenciez pas à faire défiler l'image. Maintenant, c'est le chargement différé du navigateur, et ce n'est pas compatible avec tous les navigateurs, compatible avec la plupart des navigateurs actuels. Mais pas tous les navigateurs. Et nous allons configurer des tailles paresseuses pour gérer ce chargement à notre place. L'un des avantages de cette méthode est que cela peut nous aider à charger une image de remplacement avant le chargement de l'image notre onglet Lazy Sizes, nous écrivons, cliquons et inspectons l'image. Nous pouvons voir qu'il possède une source de données SRC. Ce qui se passe, c'est que Lazy Sizes s'en empare et génère une source avec Java Script à la volée lors du premier chargement de la page Si nous allons voir la source réelle et que nous regardons les images, vous remarquerez qu'il n' y a pas de fichier source. L'image n'est qu'une source de données. C'est à la fois pour la source définie dans la source et également dans l'IMG. Vous verrez qu'il n'y a pas de source, il y a juste une source de données. Il n'est pas réellement possible pour le navigateur de charger des images à ce moment-là tant que le plugin Java Script de Lazy Sizes n' est pas entré et ne l'a pas remplacé. Et il ne le fera pas tant que l'image ne sera pas visible. Ce que nous allons faire, c'est mettre quelques images supplémentaires à l'écran et nous allons régler la première sur l'écran et nous allons régler la « Avide », car c'est une bonne pratique. Vous ne voulez pas charger en différé les images qui se trouvent au-dessus du pli. Au-dessus du pli se trouvent toutes les images visibles lors du premier chargement de la page. Vous devez considérer à la fois les appareils mobiles et les ordinateurs de bureau. Nous aborderons les mises en page et les tailles de dentelle. Nous allons copier ce div, nous devrons créer une nouvelle ligne pour celui-ci. Faites une ligne, et vous collez dans votre colonne. Sinon, ce sera côte à côte. n'est pas ce que nous voulons. Nous allons ajouter un deuxième espace réservé. Nous allons créer un espace réservé deux. Ensuite, nous allons créer une autre ligne, faire de cet espace réservé trois. Ensuite, nous allons entrer dans notre statique, et nous allons récupérer 2.3, quel que soit le nom que vous leur avez donné, et nous les placerons dans votre dossier Lazy Sizes. Revenons ensuite à votre disposition paresseuse. Nous devons configurer notre chargement. Donc, pour cette première image réservée, nous allons définir le chargement sur eager Il s'agit d'une bonne pratique, car elle se situe au-dessus du pli. Vous devez y avoir une propriété de grande taille. Et c'est l'un des inconvénients de ne pas utiliser de tailles paresseuses, c'est que vous devez les configurer manuellement Mais pour les deux autres, nous pouvons supprimer les tailles car chargement par défaut est le lazy loading over dans config yaml. Vous verrez que nous l'avons réglé sur des tailles paresseuses. Cela va configurer automatiquement les tailles paresseuses pour nous. Nous allons enregistrer cela, passer dans le navigateur pour y jeter un œil. Nos trois images arrivent ici. Nous allons cliquer avec le bouton droit de la souris pour inspecter, puis nous les examinerons rapidement. Tout d'abord, nous avons le premier ici, qui se charge avec impatience. Et tu regardes ton second. Nous n'avons pas de propriété de chargement là-dedans parce que le navigateur ne la gère pas réellement Il s'agit simplement d'une source de données. Et puis Lazy Sizes change. La raison pour laquelle il le fait est qu'il s'agit en fait d'une classe de tailles paresseuses mises sur le. Et cela se répercutera si nous allons voir la source de la page et que nous descendons à la troisième image, vous verrez que nous avons la classe Lazy Load qui change ensuite à mesure que la taille modifie les propriétés de cette Nous allons faire en sorte que l'écran ne soit plus aussi haut. Nous allons passer au réseau, nous allons le ralentir à trois G. Rappelez-vous que nous avons l'espace réservé un, l'espace réservé deux et l' espace réservé Effectuez le contrôle ou la commande pour actualiser et nous n'obtiendrons l' espace réservé qu'un seul chargement Mais une fois la page complètement chargée, vous verrez l'espace réservé 2 apparaître parce que Lazy Sizes est en train de la charger, parce qu'elle est maintenant inactive, les navigateurs Si nous le faisons légèrement défiler vers le bas, vous verrez l'espace réservé 3 apparaître en bas de l'écran Cela va augmenter considérablement le temps perdu. L'une des plus grandes augmentations que nous avons enregistrées est le fait que nous utilisons une image Web et qu'elle ne contient que 32 kilo-octets C'est l'un des meilleurs jeux de performance que nous ayons sur le Web. Et c'est quelque chose qui est géré par défaut avec ce plugin. Voici cette leçon, assurez-vous de faire un commit. Leçon 5, complétez et contrôlez Entrez pour enregistrer tout ce qui est contenu dans cette leçon. Et assurez-vous de le synchroniser. 6. Les espaces réservés: Nous cherchons maintenant comment générer des espaces réservés qui se chargeront très rapidement alors que vos grandes images attendent toujours d'être entièrement téléchargées sur la page Github du module adaptatif Encore une fois, j'ai fait défiler la page jusqu' à la section des espaces réservés. Nous pouvons configurer la configuration de l' espace réservé. Dans le fichier de configuration des munitions, vous devez avoir un chargement différé pour que cela fonctionne Vous devez donc également installer le module Javascript de taille laser également installer le module Javascript , ce que vous avez déjà fait. La première option que nous allons examiner est P, qui représente un espace réservé pour une image de faible qualité Une version de très faible qualité de l'image se chargera. Pour commencer, il est en fait aligné dans le code HTML, il est codé sous forme de texte. Ensuite, lorsque l'image est prête à être chargée, elle se charge par-dessus. Il y a quelques options que nous pouvons définir avec cela, deux, mais pour l'instant, nous n'aurons qu'à charger des espaces réservés aux images de faible qualité Nous y copierons cette configuration. Nous allons ouvrir le fichier configuré. Nous avons un kit QIP. Ensuite, nous exécuterons le serveur de développement. Si vous ne l'avez pas déjà fait fonctionner, nous l'inspecterons. Nous allons activer notre réseau en mode lent 3 G et l'actualiser. Vous verrez s'il existe des espaces réservés aux images de faible qualité , puis l'image se chargera au-dessus d'eux. Nous pouvons effectuer d'autres configurations. Je vais juste tout copier, assurer que tout est conforme au reste. Nous avons donc la quantité de flou, et c'est la quantité de flou appliquée au fichier Ensuite, nous avons le facteur qui consiste à déterminer dans quelle mesure les images IP LQ sont plus petites que la plus petite image de l'acide. Attention à ne pas trop augmenter la taille , car la taille de vos fichiers augmentera et vous perdrez le facteur positif que cela représente Vous finirez par ralentir votre page à cause de nombreuses images. Ensuite, nous pouvons regarder une couleur dominante. Si nous le réglons sur dominant, Hugo extraira la couleur dominante de l'image elle-même. Il va y insérer un petit cadeau qui sera agrandi. Nous allons enregistrer cela et nous allons y jeter un œil. Il est en train de se recharger Découvrez comment les couleurs dominantes entrent en jeu et les images sont sur le point de se charger sur le dessus. C'est une autre façon de procéder. Il existe une autre façon de le faire qui consiste à spécifier une couleur si vous souhaitez utiliser la même couleur sur l'ensemble de votre site. Comme cela fonctionne actuellement, j'ai déjà configuré ces couleurs, et elles sont basées sur les couleurs grises du bootstrap Si vous le souhaitez, vous pouvez créer votre propre couleur. Et tu dois le mettre dans ce dossier, et ce sera un cadeau. Ce sera un cadeau de dix pixels sur dix. Je ne recommanderais pas de plus petits car j'ai eu du mal à les agrandir correctement. Et je ne recommanderais pas de plus gros fichiers car vous chargerez de gros fichiers, ce qui n'est pas nécessaire. Si vous vous demandez comment cela fonctionne, nous avons ce dossier, les images de ressources, les images de remplacement Si vous recherchez dans la source du module lui-même, c'est le dossier qui s'y trouve, les images s'y trouvent. Mais vous pouvez placer les images au même endroit dans votre projet Hugo et elles seront ajoutées. Nous allons essayer d'utiliser l' une des valeurs par défaut. Tout ce que vous avez à faire est de nommer le fichier. J'y ai déjà une liste de noms. Supposons que vous vouliez faire toutes les vôtres. Gray 300, par exemple. Tu n'as pas besoin du cadeau. Nous allons commenter Dominant. Nous avons mis 300 en gris, sauf ça. Ensuite, nous le regarderons charger. Ils sont actuellement disponibles sous le nom de Gray 300. Et l'image se charge en haut, ce qui est assez couramment utilisé sur les sites Web. J'ai vu beaucoup de choses comme ça. Nous allons donc modifier les différents types d'espaces réservés et voir lequel vous préférez Avant d'oublier, assurez-vous d'effectuer un commit Git. Je te verrai dans la prochaine leçon. 7. Rapport d’aspect: Nous allons maintenant voir comment créer des images conformes à un rapport hauteur/largeur. Ils vont être réduits à un rapport hauteur/largeur particulier. Il se peut que vous n'ayez qu'une seule image à définir selon un ratio. Il se peut également que vous ayez plusieurs images. Par exemple, une galerie où nous voulons que le ratio soit le même pour tous les éléments. Il se peut que nous ayons des fiches de produits par exemple. Ce que nous allons faire d'abord, c'est passer à notre exemple de Lazy Sizes. Nous allons le copier, le coller et le renommer en ratio Nous allons entrer et nous allons porter notre poids à 50. C'est le cinquième élément que nous appelons ratio. Et nous allons changer le type en ratio. Nous allons ensuite faire une mise en page pour le ratio. Copiez notre mise en page Lazy Sizes, appelez-la ratio. Je l'ouvre puis nous reviendrons au document Lisez-moi en haut. Dans les exemples, vous trouverez un exemple de recadrage d'une image selon un rapport hauteur/largeur Voici l'exemple de base, il se trouve dans le Quickstart. Ce que nous allons faire, c'est copier la propriété du rapport hauteur/largeur. Ensuite, nous passerons à la première photo. Nous allons l'ajouter. Nous en ferons, par exemple, un carré. Nous allons donc le faire un par un. Nous allons enregistrer cela et nous allons vérifier. Nous sommes passés au ratio, vous verrez que la première image est désormais un carré, tandis que les autres sont toujours dans leur rapport hauteur/largeur d'origine. La prochaine chose que je vais vous montrer est comment créer plusieurs images avec le même ratio. Nous pouvons le faire assez rapidement avec Hugo. C'est ce que nous ferons, nous allons revenir à la page. Nous avons trois espaces réservés. Nous allons extraire davantage d'espaces réservés du dossier statique. Nous devrions les avoir partout, donc nous en prendrons 45,6 également. Nous y avons six images. Ensuite, dans le fichier de contenu de la page des ratios, nous allons ajouter un peu de Am à la page d'accueil et nous l'appellerons galerie. Ensuite, nous utilisons un tiret. Nous créons donc un tableau. Et nous allons faire RC pour l'espace réservé à la source 1 G. Ensuite, nous allons créer un titre, puis nous le copierons Ensuite, nous allons passer en revue et modifier les images et les titres. Je vais ensuite vous montrer une méthode de raccourci pour accélérer ce processus. Mais c'est ainsi que vous pouvez obtenir un texte et un titre personnalisés. L'ancien texte sera généré automatiquement pour nous. Ce que nous allons faire maintenant, c'est nous débarrasser de la troisième, puis nous allons créer une nouvelle ligne. Assurez-vous d'avoir un div à la fin, c'est votre conteneur, le dernier div de fermeture. Nous faisons donc des rangées, nous allons couper et coller ce que nous allons faire de manière légèrement différente. Au lieu de spécifier la largeur de colonne, nous allons simplement en faire une colonne. Mais ensuite, nous utiliserons une usine et un bootstrap appelés colonne de lignes Nous allons faire du charbon. Nous voulons en avoir trois par exemple, mais peut-être que vous voulez avoir ce MD ci-dessus. Donc, dans ce cas, vous devez placer Coles dans la première ligne, puis dans les rôles M deux, puis dans le froid trois. Nous devons faire quelques itérations. Nous utiliserons la gamme. Nous allons passer en revue la galerie Pm. Et nous terminerons la plage après notre colonne, nous reproduisons la colonne et l'image À chaque fois, nous supprimerons ce paragraphe et nous le placerons au-dessus du nouveau onecall Custom contient le texte du titre. Nous devons maintenant remplacer le contexte par le signe $1 car ils se situent dans une fourchette. Nous voulons utiliser le contexte de haut niveau de la page dans ce fichier, qui est le signe du dollar que je vais nous donner. La source de la page sera C car ils fonctionnent sur Tide Gallery. C'est le contexte. Au lieu de l'ancien, nous utiliserons le titre, le titre, puis nous définirons le rapport hauteur/largeur. Par exemple, nous pouvons passer à Slice 11 si vous voulez une galerie carrée. Ensuite, nous allons vérifier cela dans le navigateur. Ça a l'air super. Il suffit d'ajouter un peu d' espacement entre les images. Les colonnes bootstrap sont déjà légèrement rembourrées à gauche et à droite Nous voulons annuler cela car il ne s'agit pas d'un chiffre rond. Nous pouvons en choisir deux et j' ajouterai un montant fixe. Ça a l'air bien mieux. Je me penche maintenant sur la réactivité lorsque nous le redimensionnons Ensuite, nous passons à deux , nous le réduisons à très petit en une taille. Voyons quelles tailles nous pourrions avoir besoin. Si nous en parlons, vous remarquerez qu'ils y sont assez petits. Nous verrons quelle est leur taille à leur point le plus élevé lorsqu'il passe à deux Cela s'affiche à une taille de rendu de 356. Nous pourrions opter pour 360. Ensuite, nous ajouterons des variantes plus larges. Par exemple, nous avons affaire à environ 06:50 quand il tombe en panne de 523, nous allons entrer des largeurs par tranche, disons 36550 . Nous en mettrons un plus grand pour les écrans haute densité, disons 700, puis peut-être 1 000. Nous allons vérifier cela. Vous devez accéder au réseau et désactiver le boîtier. Vous pouvez désactiver le boîtier d' étranglement. Lorsque vous le rechargez, si vous voulez que la nouvelle taille apparaisse, vous pouvez voir qu'elle est 357, mais elle attire le 550 à cause de la densité sélectionnée de l'écran Si vous regardez vers le haut, vous verrez que des images de différentes tailles y sont extraites, qui sont générées automatiquement. Je vais maintenant vous montrer quelques méthodes abrégées pour générer une galerie. La première solution est de simplifier légèrement ce processus. Nous l'appellerons galerie deux, mais cette fois, au lieu de créer un tableau à l'intérieur du tableau, nous avons des objets, nous allons simplement créer un tableau. Nous le faisons donc de la manière la plus simple. Vous pouvez faire plusieurs lignes, mais nous pouvons faire une seule ligne. Nous avons un espace réservé, nous allons simplement le copier-coller pour simplifier les choses, 23456 Et puis vous fermez avec le crochet, changez le nom de vos fichiers. Ensuite, je vais vous montrer une méthode encore plus rapide. Vous avez toutes les photos dans un seul dossier, supprimez-les toutes. Permettez-moi de revenir à notre mise en page. Copiez ces deux lignes. Il s'agit d'une galerie d'un tableau, aucun titre n'est défini sur la plage de la galerie deux. La source sera simplement parce que chaque fois que nous parcourons ce tableau, il ne renvoie qu'un seul élément. Et ça ne s'appelle pas Decay. Il suffit qu'un seul article devienne un point comme titre. Il y a plusieurs façons de le faire. Vous pouvez simplement définir une image générique si vous souhaitez qu'elle soit numérotée. Par exemple, nous pourrions utiliser l'index de chaque itération où il est indiqué point params gallery two Nous pouvons mettre un dollar sinus, dollar sinus est égal à deux points. Si vous êtes nouveau dans ce domaine, vous pouvez en fait utiliser l'élément d'index du nom complet. Nous pourrions nommer l'élément comme vous le souhaitez. On pourrait appeler ça une photo, par exemple. J'ai compris le contexte. Cela fonctionne toujours. Si vous le souhaitez, vous pouvez le changer en photo, peu importe. Mais pour notre titre, nous avons maintenant un index. Mais l'indice commence à zéro. Nous voulons que notre première image soit l'image 1. Ce que nous allons faire, c'est 1 dollar puisque 1 colon est égal à 1 dollar. Nous utiliserons l'impression et nous créerons un modèle. Le modèle sera le pourcentage V du produit entre parenthèses. Nous allons ajouter un index, et nous allons en ajouter un en commençant par un au lieu de zéro. Pour notre titre, nous utilisons dollar sine title. Nous allons donc enregistrer cela et jeter un œil dans le navigateur. Voilà notre deuxième set. Maintenant, nous, souris, avons évidemment le produit un, le produit deux, le produit trois. Si nous inspectons et que vous regardez le texte alternatif, il est indiqué que l'image du produit 3 est définie pour nous. Si tu le voulais, tu pourrais l'annuler. Créez un autre modèle. Jetons un coup d'œil à quelques autres façons de le faire. Je suis sur la page Ressources page de documentation de Hugo. Je vais laisser un lien vers ça. Si vous faites défiler l'écran vers le bas et que vous examinez les différentes méthodes, vous découvrirez plusieurs méthodes différentes. La première est par type, vous pouvez obtenir toutes les images d'une page. Et le second est un peu plus granulaire et consiste à faire correspondre en utilisant le globe, c'est ce que forcent les étoiles Nous avons trouvé notre voie et l'étoile l'est. Pour n'importe quelle image, nous regarderons le globe, associons abord avec match, nous la copierons Je vais coller ci-dessous ce que nous avons fait, et nous copierons ce que nous avons. Collez-le dedans, nous utilisons cet appel galerie depuis un dossier. Nous copierons la correspondance entre les ressources par points. Débarrassez-vous des crochets au lieu des paramètres. Dans la deuxième galerie, nous collerons les images de nos ressources par points, puis nous remplacerons les images par galerie ou le dossier à partir duquel vous souhaitez créer des images. Et nous allons créer ce dossier, je l'appellerai galerie, et je copierai et collerai des images dedans, préférence des images différentes. Si vous les avez disponibles, nous les enregistrerons et nous les examinerons dans le navigateur. Voici notre galerie qui sort du dossier. Il affiche toutes les images du dossier. L'autre méthode est par type. Nous allons le copier. Nous allons le coller temporairement. Copiez les deux lignes. Remplacez ce que nous avons déjà. Galerie à partir de la ressource de la page. Dites que nous allons y jeter un œil. Voici notre galerie d'images de ressources de toutes les pages. Et comme vous pouvez le constater, nous avons des images doubles parce que les images ont été dupliquées en tant que ressources de page C'est tout pour les formats d'image. Ajoutez également quelques informations supplémentaires que vous pouvez utiliser pour l'implémenter. N'oubliez pas de faire un commit avant d'aller plus loin, je vous verrai dans la prochaine leçon. 8. Codes courts: Nous allons examiner l'utilisation de codes courts dans les fichiers Markdown. Nous allons créer une nouvelle page. Nous allons copier la page Lazy Sizes. Nous l'appellerons markdown parce que nous allons l'utiliser non seulement pour les shortcodes, mais aussi hooks de rendu à venir Changez notre titre en markdown, puis nous supprimerons le type car nous pouvons simplement utiliser notre modèle par défaut Si vous vous demandez comment cela fonctionne dans les mises en page, par défaut, nous avons notre code HTML unique plutôt qu'un seul HL dans l'un des fichiers nommés Parce que nous allons utiliser Markdown pour contrôler tout ce qui se passe et nous allons changer notre poids à 50 étant le cinquième élément Enregistrez cela, puis nous pouvons commencer par codes courts lorsqu'ils auront accès à notre page pour le module d'images adaptatives. Si vous vous limitez aux codes abrégés, nous avons ici un exemple de rapport hauteur/largeur. Si c'est l'un des exemples est parce qu'il vous montre simplement comment vous n'avez pas à utiliser de tableaux ou de tranches, c' est-à-dire à mettre des virgules pour séparer plusieurs valeurs Nous copierons cet exemple, puis de nouveau dans notre Markdown, nous le collerons Nous y avons configuré notre largeur, nous allons la mettre dans une largeur plus grande. Encore une fois, si vous ne spécifiez pas de largeurs, les valeurs par défaut seront utilisées Nous allons donc en mettre 300 par exemple. Nous avons notre ratio hauteur/largeur et nous devons avoir une source d'image. Nous allons le mettre, disons, dans l' espace réservé six. Mets-le dans notre Markdown, quelque chose de différent. Nous pouvons même le mettre dans un dossier si nous le voulons, car nous ne l'avons pas encore fait. Nous allons créer un dossier appelé images, nous allons les faire glisser. La source sera constituée d'images, avec un espace réservé de six fichiers Jpg. Si vous avez un espace dans l' un de ces paramètres, par exemple l'ancien contient un espace dans la chaîne, vous devez utiliser le double. Mais s'il n'y a pas de ******, ils ne sont pas obligatoires. Ensuite, nous allons mettre un titre pour dire le titre deux. Nous en tirons un avec notre titre Markdown basé sur notre modèle Nous sommes en tête, avec un code court et un ratio 423, avec 900 ou 1 300 pixels. Sauvegardez-le et nous allons vérifier. Voilà notre image maintenant. Vous ne voulez peut-être pas qu'il soit aussi large. Disons, un billet de blog. Voyons comment nous pouvons limiter la largeur. Si nous allons inspecter, vous verrez que nous avons un emballage MG qui l'emballe Nous pouvons réellement changer cela. Si nous examinons notre exemple de configuration, vous remarquerez que nous avons la classe wrapper en code court et qu'elle est actuellement définie IMG wrapper, mais vous pouvez modifier cette classe Rapper si vous Mais je m'en tiens au wrapper IMG car il est utile à la fois pour le hook de rendu et le shortcode sur lequel nous travaillons actuellement Ensuite, dans votre projet, la configuration du CSS est vraiment simple. Pour celui-ci, nous devons cibler le rappeur IMG. Il existe de nombreuses façons de le faire. Une solution serait d'afficher le bloc, puis la marge gauche automatique et la marge droite automatique centrée. Mais nous devons également veiller à ce que la largeur soit légèrement inférieure à celle de la page complète. Lorsque nous sommes sur un écran plus large, nous pouvons le faire pour les médias, comme lorsque vous fournissez les tailles, la largeur minimale, nous allons faire 768 fois l'intérieur, largeur de représentation et nous disons 75 % de la largeur de vue Nous allons enregistrer cela, puis nous allons jeter un œil dans le navigateur qui est encore un peu large. Nous y retournerons et nous le réduirons à plus. Je pense que c'est une meilleure largeur pour un blog, mais je pourrais modifier le rapport hauteur/largeur pour qu'il soit un peu plus large car il est un peu trop élevé. Nous allons revenir à notre ratio, disons, par exemple, 169. Nous allons enregistrer cela, nous allons y jeter un œil. C'est probablement un bon ratio pour un article de blog. Il existe une façon d' utiliser un code court avec un seul paramètre de position Ici, nous avons des paramètres de nom. Nous avons, donc nous avons le format d'image, etc. Ici, nous n'avons pas de nom pour le paramètre, il est positionnel Vous pouvez avoir plusieurs paramètres de position. Image et aussi le code abrégé de l'image uniquement. Ils ne fonctionnent qu'avec des paramètres uniques. La seule chose est que si vous ne configurez pas vos paramètres supplémentaires en utilisant les paramètres page ou les métadonnées des ressources, ce que je vais aborder avec la leçon, ils ne s' afficheront probablement pas comme vous le souhaitez en utilisant les valeurs par défaut Par exemple, vous n' aurez pas d'ancien texte, je ne vais pas m' embêter à le couvrir. Mais dans une prochaine leçon, lorsque nous examinerons les pagemètres et les métadonnées, je les intégrerai et je vous montrerai cette Assurez-vous d'effectuer un commit avant de terminer. Je te verrai dans la prochaine leçon. 9. Crochets de rendu: Nous allons voir comment utiliser la syntaxe standard du markdown pour afficher images réactives dans les coulisses C'est ce qu'on appelle un hook de rendu, lequel Hugo utilise le code du module pour modifier le comportement des images Markdown Commençons par lire le module d'images adaptatives. Nous sommes dans la section des crochets de rendu. La première chose que vous remarquerez, c'est que nous avons un exemple de la façon dont vous pouvez inclure une image avec Markdown. Rien de spécial ne s'y passe, mais nous devons inclure la configuration pour que cela fonctionne. Car cela cassera les images que vous avez déjà configurées lors de l' installation du module. C'est donc quelque chose que vous devez accepter. L'élément de configuration est render hook true. Allons-y, nous allons simplement ajouter l'image pour commencer et nous verrons comment elle s'affiche. Ensuite, nous allons continuer, puis nous ajouterons la configuration et nous verrons comment elle change sur cette page. Nous travaillons juste sur la page Markdown. Nous ajouterons un autre titre, nous ajouterons le titre deux, nous ferons un hook de rendu en utilisant la syntaxe d'image Markdown, toutes les fautes étant utilisées Ensuite, nous allons prendre cet exemple, nous allons le coller, nous allons prendre une image. Nous allons passer à l'espace réservé 5. Cette fois, nous allons ajouter dans le dossier des images l' espace réservé cinq Il va falloir configurer notre image. Ce sera l' espace réservé aux images 5, car nous utilisons la syntaxe Markdown standard L' Intellisense y fonctionne en fait. Nous pouvons définir le texte de l'image, nous le configurerons plus tard. Nous l'enregistrerons lorsque nous regarderons dans le navigateur. Il s'agit de l'image Markdown par défaut. Voici notre image par défaut qui arrive. Elle est en fait plus grande que la page car aucun CSS n'est fourni. Il ne s'agit pas d'une image réactive. Si nous y allons et inspectons, c'est la balise d'image standard avec la source à l' ancienne et le titre C'est juste le défaut qui fonctionne avec Hugo. Vous devrez configurer du CSS pour votre balise d'image standard. Vous souhaiterez peut-être également avoir du CSS sur la page. Peut-être facile de ne pas affecter toutes vos images. Mais allons-y et faisons-le beaucoup mieux avec Hugo. Nous allons obtenir notre configuration qui est render hook true. Nous allons le copier. Nous allons ouvrir la configuration. Oui, nous allons le saisir, puis nous l'enregistrerons et nous le vérifierons à nouveau dans le navigateur. Maintenant, elle est livrée avec l'emballage, et c'est aussi une image réactive Le seul inconvénient est que nous ne pouvons pas définir de paramètres car nous ne pouvons pas le faire avec le hook de rendu Et c'est ce que nous allons aborder dans la prochaine leçon. Mais si vous y jetez un œil, vous remarquerez qu'il s'agit d'une étiquette photo contenant tout ce dont vous avez besoin. C'est tout pour cette leçon. C'était une question courte, mais nous allons l' approfondir un peu. Leçon suivante sur la façon dont nous allons ajouter des paramètres. Assurez-vous de vous engager avant de continuer. Et je te verrai dans la prochaine leçon. 10. Paramètres de page: Examinons maintenant les paramètres de page qui nous permettent de définir la configuration au niveau de la page et cela affecte toutes les images de la page. Nous avons une page, la page Markdown sur laquelle nous travaillons. Et nous avons utilisé un hook de rendu, mais nous n'avons pas pu définir autre chose que l'ancien texte et le texte du titre. Ce que nous pouvons faire, c'est que si nous affichons notre configuration yaml dans les paramètres, nous y avons la propriété image Ensuite, nous entrons et définissons notre configuration. Par exemple, si vous vouliez définir toutes les largeurs sur une page, nous pourrions la copier C'est la même syntaxe. Vous n'avez pas besoin d' utiliser de paramètres car cela apparaît déjà sous forme de paramètres Ensuite, nous pouvons modifier toutes les largeurs de la page entière. Supposons que nous ayons supprimé les largeurs ici parce que nous savons que nous couvrons les trois quarts de la page, parce que c'est comme un article de blog Nous pourrions alors faire 640, peut-être 900, et le fixer à 1 300. Nous le fixerons à 950 Nous allons donc enregistrer cela. Nous allons vérifier si cela fonctionne dans le navigateur, nous allons regarder notre image Red Hook. Et nous y ajoutons un peu de largeur, 64 950,300. Et cela affectera toutes les images, sauf si nous les définissons au niveau de l' image ou au niveau Maintenant, vous ne pouvez pas définir un niveau d' image pour Red Hook, vous pouvez le faire avec le code court. La prochaine chose que nous allons examiner est de savoir comment définir paramètres à un niveau de métadonnées légèrement supérieur à celui de la page. Si vous regardez ici, nous avons tous les différents paramètres que vous pouvez définir. Et il y a une table juste au bout qui vous permet savoir où vous pouvez et ne pouvez pas les placer. Par exemple, Source, vous ne pouvez le définir qu'en ligne. Mais ensuite, nous passons au format d' image et nous pouvons le définir en conséquence. Nous pouvons définir cela au niveau des métadonnées que nous allons examiner. Vous pouvez le définir au niveau de la page, mais vous ne pouvez pas définir le rapport hauteur/largeur au niveau du site. Vous pouvez en fait voir où vous pouvez définir ces différents paramètres à quel niveau. Nous allons maintenant passer à la leçon suivante, qui porte sur la configuration de nos métadonnées. Assurez-vous de faire un commit. Et je te verrai dans la prochaine leçon. 11. Données Meta: Nous cherchons maintenant à définir des paramètres au niveau des ressources. Et cela ne concerne que les ressources des pages, et cela utilise des métadonnées. Je suis de retour sur la page des ressources de la page Hugo que nous avons utilisée précédemment et je vais mettre un lien vers cette page pour cette leçon ci-dessous. Si nous descendons à la page Métadonnées des ressources en bas, cela nous montre comment nous pouvons les configurer. Cela se trouve dans votre page actuelle et vous devez y mettre une ressource de propriété. Ensuite, à partir de là, nous pouvons procéder à sa mise en place. Le moyen le plus simple de le faire est d'utiliser la source pour commencer. C'est là que vous ciblez l'image. Vous pouvez cibler plusieurs fichiers, mais pour l'instant, nous allons simplement cibler celui que nous allons mettre dans les ressources, puis nous allons entrer le code source. Vous pouvez le renommer en utilisant son nom, mais je n'entre généralement pas dans le vif du sujet Vous pouvez définir le titre ici ou vous pouvez définir le titre dans les paramètres, nous allons l'indiquer Ensuite, dans notre premier article, nous allons le configurer et nous débarrasser du nom, parce que je n' aime pas les renommer, cela ajoute simplement un niveau supplémentaire de complexité à la source Nous allons examiner le ciblage de l' espace réservé 5, puis nous devons configurer le Pm. C'est comme si vous travailliez avec les paramètres de page habituels. Nous devons travailler dans l'espace des noms des images. En théorie, vous pourriez simplement le copier, mais vous devez le faire dans l'espace d'un onglet situé entre les aisselles, nous devrons d'abord y aller Nous allons définir le rapport hauteur/largeur pour que cela soit évident. Nous allons le régler sur un carré 11 en bas du bing. Nous avons une longue liste de paramètres et nous vous indiquons où vous pouvez les définir en tant que moulages dans la dernière leçon. Vous devez donc consulter les listes par exemple. Nous voulons modifier le chargement de cette image, car c'est un défaut d'utilisation de tailles diffuses. Nous voulons donc simplement le régler sur eager. Ensuite, à partir de là, nous devrons définir les tailles. Nous allons commencer par le chargement. Nous allons configurer cela pour, par exemple, utiliser la valeur par défaut du navigateur. Ensuite, nous devons définir nos tailles manuellement. Parce que nous utilisons une image réactive, nous ne nous retrouvons pas avec un conflit. Nous allons commencer par la largeur moyenne, en considérant 768 pixels en raison de la largeur de notre colonne bits strap. Et nous allons le régler à 60 % de la largeur de vue. Sinon, si nous sommes en dessous de 768, regardez 100 % de la largeur de la vue, nous l'encadrons entre guillemets. Nous allons enregistrer cela, nous allons y jeter un œil. Ça arrive dans un carré. Et si nous inspectons, vous pouvez voir que nous avons hâte de charger. Et puis nous avons la propriété de notre taille que nous avons définie. Le navigateur saura quelle image saisir. Vous pouvez l'utiliser pour n'importe quel type d'image, qu'il s'agisse d'un crochet de rendu, que vous utilisiez un code court ou qu'il s'agisse d'une image que vous avez utilisée dans un modèle HTML. C'est tout pour cette leçon. Assurez-vous d'effectuer un commit avant de continuer. Et je te verrai dans la prochaine leçon. 12. Chiffres: Nous examinons maintenant comment générer des figures à l'aide du module d'images adaptatives. Nous allons passer au contenu et nous allons copier la page des ratios. Nous allons le renommer Figure. Ensuite, nous allons entrer dans la page et nous allons nommer le chiffre du titre. Le type passera à la figure, nous supprimerons le reste de cette page préliminaire et nous supprimerons la galerie. Et nous nous en tiendrons peut-être à trois images pour le moment. Ensuite, nous allons changer le poids à 70 car il s'agit d'un septième élément du menu. Nous allons ensuite passer aux mises en page. Nous allons récupérer la disposition des ratios, par exemple, la renommer en figure Ensuite, nous entrerons et nous débarrasserons de toutes ces rangées supplémentaires qui gardent le conteneur. Ensuite, nous reviendrons à nos documents. Nous allons faire défiler la page jusqu'à l'exemple de figure. Nous allons copier ce texte. Vous appelez au carré le partiel appelé chiffre cette fois au lieu de l'image. Ensuite, nous supprimerons partiellement l'image. Nous allons le coller dedans. Nous allons simplement corriger le formatage à l' aide de la touche Tab. Nous vérifions simplement quelle image nous allons cibler. Nous allons donc opter pour l' espace réservé à trois Jpg. Puis le titre de la légende. Il va suivre l' image, l'appeler montagnes. Et puis la légende est le texte sous le titre. Je vais le remplacer par « Prise pendant mes vacances ». Le lien sert à relier l'image réelle. Parce qu'il est difficile de lier l'image qui se trouve à l'intérieur d'une figure, car vous ne pouvez pas y accéder dans votre modèle de lien pour le moment. Si vous le souhaitez, vous pouvez supprimer le texte alternatif. L'alt par défaut est la légende, le titre de l'image sera par défaut le titre de la figure. Nous allons enregistrer cela et jeter un œil dans le navigateur. Nous avons notre figurine ici, il y a le titre, puis il y a la légende que nous écrivons, cliquons et inspectons. Nous avons nos deux types d'images qui arrivent, ce qui est génial. Nous avons un chiffre. La classe est Figure, et elle est configurée pour Bootstrap. Nous avons une légende de figure avec une classe de légende de figure. Et c'est encore une fois configuré pour Bootstrap. Nous avons notre cap, c'est le pliage au niveau quatre. Et je vais vous montrer comment changer cela en une minute. Et puis nous avons notre légende. Nous pouvons définir d'autres options. Par exemple, si vous souhaitez modifier le niveau du titre, vous pouvez y utiliser cette propriété, légende de la figure, le titre du niveau. Vous pouvez également ajouter une attribution avec le nom de l' auteur, puis une page. Essayons d'ajouter l' attribution et le niveau. Collez-le dedans. Nous allons supprimer sous-titres parce qu'ils se doublent. Nous allons choisir le nom de l'auteur pour le moment. Tout cela est inspiré de la partie officielle de Hugo, mais il n'est évidemment pas réactif comme celui-ci. Maintenant que nous avons le nom de l'auteur, vous avez également le lien de l'auteur qui s'y trouve. Ensuite, nous changerons notre niveau pour dire trois . Par exemple, je vais faire une inspection, maintenant c'est un H trois. Maintenant, je vais vous montrer comment utiliser un crochet de rendu pour générer une figure. Nous allons revenir à notre page de crochet de rendu, qui est marquée vers le bas. Nous allons copier cet exemple de hook de rendu. Nous allons le coller et nous allons prendre l'espace réservé 2. Cette fois, nous avons un chiffre qui arrive. La largeur est limitée car nous avons notre classe d'emballage d'image défini notre classe d'emballage d'image sur elle parce que nous utilisons un hook de rendu Et nous avons configuré notre CSS plus tôt. Nous avons obtenu notre titre et notre légende via des métadonnées. C'est ainsi que vous utilisez une figurine avec un crochet de rendu. C'est la première leçon. Assurez-vous d'effectuer un commit Git avant de passer à autre chose. Et je te verrai dans la prochaine leçon. 13. Support de noscript: Dans cette leçon, nous verrons ce qui se passe si n'est pas activé dans le navigateur de l'utilisateur Javascript n'est pas activé dans le navigateur de l'utilisateur ou si Javascript est désactivé. Et cela peut également être courant pour les utilisateurs de technologies d'assistance Sur le fichier Lisez-moi à nouveau pour le module d'images réactives et recherchez la section qui ne contient aucun script. Nous devons le faire, c'est l'activer. C'est quelque chose que vous devez choisir car Javascript et du CSS sont requis. Tout d'abord, nous allons configurer la configuration, nous allons l'activer, nous allons entrer dans Doyal configuré, nous allons l'activer Ensuite, nous devons ajouter le Javascript ou aller dans Layouts et Default, puis aller en haut de la tête, puis nous copierons le script Cela ajoute une balise JS. Si le navigateur supporte Javascript, vous pouvez avoir une balise no JS en tant que classe HTML si vous le souhaitez. S'il est là, il sera supprimé et remplacé par JS. Mais si ce n'est pas présent, c'est bon, ce n'est pas obligatoire. Vous vous retrouverez avec une classe JS dans votre code HTML. Et nous verrons comment cela fonctionne dans une minute. Je vais le copier, nous allons le coller dedans. Ensuite, nous avons du CSS. Maintenant, vous pouvez le charger sous forme de style, ou nous pouvons le copier et le mettre dans le fichier CSS, ce qui est probablement une meilleure idée. Nous passerons au statique et au CSS, nous ajouterons un commentaire, nous savons ce que c'est, nous le collerons et nous enregistrerons le script. Ensuite, nous allons jeter un œil dans le navigateur. Si nous cliquons et inspectons, vous verrez que la classe JS apparaît maintenant. Alors que si nous examinons la source, vous verrez qu'il n'y a aucune classe de JS. Maintenant, comme nous l'avons déjà fait, comme nous l'avons déjà fait, lorsque l'image est chargée, si nous nous contentons de visionner, donc d'entrer dans les images, vous remarquerez que la source elle-même est l'espace réservé que nous avons généré Ensuite, nous avons la source de données, que Lazy Sizes saisira et remplacera Il en va de même pour nos sources. Avec notre ensemble de sources, l' ensemble de sources de données sera utilisé pour créer un ensemble de sources au bon moment. Le problème, c'est que s' il n'y a pas de script Java, cela n'arrivera pas. C'est pourquoi nous sommes en train de générer le script no. S'il n'y a pas de Javascript, aucun script ne fonctionnera réellement. Mais nous aurons une image avec l'espace réservé et en dessous, nous aurons l'image réelle Allons-y et voyons comment fonctionne ce CSS. Parce que le CSS désactivera réellement cette image et l' activera sans script. S'il n'y a pas de JS en haut, nous allons lancer la commande et taper Java , puis vous pouvez désactiver Javascript puis recharger Nous allons faire défiler la page vers le bas car l'image du haut n'utilise pas de tailles alternatives. Nous avons réglé ce paramètre sur eager. Cliquez avec le bouton droit de la souris sur l'une des images de la galerie et vous verrez par défaut que le script est en fait surligné. C'est parce que c'est l'image que nous sommes en train de regarder en ce moment, c'est ça. Aucune image de script, nous venons d'activer lors de la configuration. Regardez dans l'image, vous verrez que la source est une donnée et qu'il s'agit en fait de l'espace réservé qui est encodé dans le texte Il se charge très rapidement. En ligne. L'image doit être téléchargée. Cela fait déjà partie du code HTML, mais qu'il n'y a pas d'image parce que nous n'avons pas classe JS en haut de notre balise HTML. Parce que ce n'est pas le cas. Le CSS masque cet espace réservé. De cette façon, nous pouvons voir notre absence de script. Si nous devions désactiver le CSS, nous verrons ce qui se passera. Nous allons entrer et contrôler K C jusqu'à la sortie. Ensuite, nous allons actualiser et vous verrez que nous avons nos espaces réservés et les images sans script. Nous avons activé notre paramètre sans script, mais nous n'avons pas inclus le CSS sinon vous pourriez oublier le JS, par exemple Vous allez vous retrouver avec des doubles. Ce n'est pas ce que nous voulons. Nous allons réactiver notre CSS. C'est tout pour le cours. Assurez-vous de faire un commit.