L'essentiel de Ruby on Rails

Rajouter des images

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Grâce à Foundation, votre application est en bonne voie, mais il manque une touche personnelle. Voyez comment y ajouter des images.
02:37

Transcription

Nous aimerons ajouter un logo à notre site. Mais comment ajouter une image sur une application Ruby on Rails ? Vous pouvez évidemment utiliser la balise HTML img. Mais Ruby on Rails, ayant des méthodes pour tout, il y en a aussi une pour les images. Nous aimerions, par exemple, ajouter ce logo. Je le copie et je vais l’insérer à l’intérieur du dossier images de mon application. Vous pourrez retrouver ce dossier images dans app, asset, images. Collez-la ici. Maintenant que c’est fait, rendez-vous dans votre code de l’application. Nous allons ajouter le logo dans notre menu. Nous ajoutons donc li, puis la méthode rails, image_tag. Cette méthode prend en paramètre le nom de notre image, à savoir ici logo.png. Si l’image avait été dans un sous-dossier, par exemple, sous-dossier logo, nous aurions pu y accéder de cette manière. Il faut que ce premier paramètre soit le chemin vers l’image à partir du dossier image dans app\assets. Ajoutons-lui deux options : alt pour indiquer le texte alternatif - ici, Logo pour l’accessibilité de notre site – et class qui indiquera la classe CSS de notre image. Pour faire original, nous l’appelons aussi logo. Nous pouvons d’ores et déjà tester son affichage. Évidemment, pour le moment, nous n’avons pas redimensionné le logo. Du coup, il apparaît quasiment en pleine page. Nous allons remédier à cela. Quand on est dans notre code, ici dans header.css, nous allons modifier la taille de l’image. Comme il s’agit d’un sous-élément de menu, nous pouvons directement mettre ici img.logo height : 40px. Rafraîchissons et voilà : nous avons notre logo qui apparaît désormais en tout petit dans notre menu. Vous voyez qu’au hover, il y a le fond transparent un peu plus clair qui apparaît. Changeons cela. Comme nous sommes toujours embêté par l’utilisation ici du li avec le background, mettons plutôt a. Désormais, nous n’aurons plus besoin de celui-ci. Rafraîchissons. Nous avons bien le hover qui fonctionne toujours pour les liens, mais ce n’est plus le cas pour le texte et l’image à gauche. Nous avons vu dans cette vidéo comment ajouter simplement une image à une application Ruby on Rails. Grâce à la méthode image_tag, vous pourrez ajouter toutes les images que vous souhaitez au sein de votre application. N’oubliez pas de leur appliquer des classes CSS pour pouvoir les modifier dans vos feuilles de style.

L'essentiel de Ruby on Rails

Concevez des applications web évolutives et intemporelles avec Ruby on Rails. Installez l’environnement, réalisez un projet de stack overflow, enrichissez-le, etc.

6h08 (85 vidéos)
Aucun commentaire n´est disponible actuellement

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !