1893 avis : 5/5 ⭐️⭐️⭐️⭐️⭐️

Wordpress développement

Developpeur wordpress

Ajouter Cloudinary sur une application rails existante

Tutoriel en vidéo

Avant de commencer

Voici le schema de notre base de donnée. Nous souhaitons attacher des images à notre table lists

Et non, pas besoin de migration 😉

schema de DB rails

Modifier le model list pour ajouter la méthode picture

Aller dans le model concerné (en l’occurence pour notre exemple : /models/list.rb)

Puis nous allons ajouter en dessous de la classe :

has_one_attached :picture

Bien mettre la nouvelle ligne en dessous de la class ⚠️

Installer cloudinary

Premièrement nous allons ajouter la gem Cloudinary à notre gemfile. La seule spécificité est de l’ajouter au dessus du groupe de développement et de production dans le gemfile.

# Use Cloudinary for load image
gem 'cloudinary'
# Protect my api key rails
gem "dotenv-rails"

N’oubliez pas de lancer la commande dans le terminale :

bundle
commande bundle rails

Ajouter la clef API Cloudinary

Afin de sécuriser votre clef API cloudinary, nous allons créer un fichier .env la contenant. Pour cela lancer à la racine de votre application :

touch .env
echo '.env*' >> .gitignore

La commande echo ‘.env……’ vous permet d’ajouter une ligne dans le fichier .gitignore afin de lui spécifier de ne pas pusher votre fichier .env sur github. Si votre fichier .env est envoyé sur github, tout le monde a accès à cette dernière.

ruby en rails .env
fichier .env rails

Ajouter votre clef cloudinary

Pour cela, rendez-vous dans le fichier .env créé ensemble. Puis aller sur cloudinary et copier via dashboard votre secret API. Voir capture :

clef api cloudinary rails

Copier / coller la clef (ctrl c / ctrl v ou cmd c / cmd v pour les macs)

clef api cloudinary fichier .env

Active record pour ajouter la relation des images à la base de donnée

Dernière ligne droite avant de pouvoir envoyer / afficher vos images utilisateur sur votre application Rails. Il vous faut installer active record. Pour cela on va lancer les commandes :

rails active_storage:install
active record pour image cloudinary ruby on rails

Un fichier de migration a été créé avec les tables active record. Nous avons besoin de lancer le fameux rails db:migrate pour mettre à jour notre schema de base de donnée.

rails db:migrate

Voici votre nouveau schema.rb :

active record schema.rb

Adapter notre stockage de fichier sur notre application rails

Pour ce faire, rendez-vous dans le fichier storage.yml (dans le dossier config de votre application ruby on rails) :

# chemin du fichier pour ajouter le code : config/storage.yml
cloudinary:
  service: Cloudinary
  folder: <%= Rails.env %>

Modifier le comportement du fichier developement

Nous devons maintenant indiquer au fichier developement.rb le comportement de stockage de nos images. Nous allons chercher la ligne :

Nous allons modifier la valeur = :developement par :cloudinary

Mettre à jour le fichier test et production

Il faut effectuer la même manip pour le fichier production.rb :

Ajouter un champ d’upload d’image

Pour donner la possibilité à l’utilisateur de pouvoir uploader une image lors de la création de son compte par exemple, où pour un appartement à mettre en location en second exemple. Il faut modifier le simple_form en ajoutant un champ file.

Voici le résultat côté front :

Adapter le controller pour accepter le nouveau champ

Comme vous le savez, lors de la création d’un élément (user, post, flat ou tout autre object ruby) nous avons définis par sécurité des strongs params permettant ainsi aux utilisateurs de créer / modifier uniquement les valeurs données dans le controller. Ne pas oubliez que tout ce qu’on expose en front peut être voler / modifier en inspecteur d’élément > éditer en html. Un utilisateur peut facilement ajouter des champs qui ne sont pas prévus.

Il nous faut alors aller dans le contrôleur lié au model appartement ou celui qui peut désormais recevoir des images pour lui ajouter un complément de code :

Et voilà ! Nous pouvons tester notre application maintenant

Remplir le formulaire en passant une image de votre choix sur votre ordinateur. Puis, si tout est bien configuré, vous devriez avoir un dossier développement sur votre compte Cloudinary contenant toutes vos images uploadées :

Afficher votre image :

Pour afficher votre image, vous pouvez placer la balise cl_image_tag sur la show concernée / index :

<%= cl_image_tag @list.photo.key,
      width: 400, height: 300, crop: :fill %>

Le @list.photo.key permet de récupérer la clef de l’image pour votre variable d’instance. Car la balise cl_image_tag prend une string contenant la clef Cloudinary de l’image. Nous souhaitons afficher les images dynamiquement en fonction de l’upload de l’utilisateur, et non mettre en brut notre clef Cloudinary pour l’image

Envoyer des images sur votre serveur de production

Pour configurer Cloudinary sur Heroku ou votre environnement de production, n’oubliez pas de lancer la commande dans votre terminale :

heroku config:set CLOUDINARY_URL=PASSERLACLEFAPI

Articles dans la thématique Wordpress :
Configuration Cloudflare pour WordPress : Guide Pratique

Le contenu ruby on rails est dédié à la communauté du Wagon (élèves et professeurs). Pour vous inscrire au bootcamp pour devenir web développeur c'est ici. Augmentez la performance et sécurisez votre site WordPress grâce à Cloudflare. Ce guide détaillé couvre les réglages essentiels, des DNS à la configuration avancée..

Lire l'article
mise à jour wordpress 6.3, wordpress 6.3, wordpress version
WordPress 6.3 Beta 3 – Tout savoir sur la mise à jour

Le contenu ruby on rails est dédié à la communauté du Wagon (élèves et professeurs). Pour vous inscrire au bootcamp pour devenir web développeur c'est ici. WordPress, la plateforme de gestion de contenu (CMS) la plus populaire au monde, continue d’évoluer et de s’adapter aux besoins changeants des développeurs et.

Lire l'article
Créer un site vitrine
🚧 Créer son site vitrine WordPress (Guide complet 2023) 💥

Le contenu ruby on rails est dédié à la communauté du Wagon (élèves et professeurs). Pour vous inscrire au bootcamp pour devenir web développeur c'est ici. Qu’est ce qu’un site vitrine ? Un site vitrine comme son nom l’indique représente l’image de votre société / entreprise en ligne. C’est exactement.

Lire l'article