II. A. b. Gestion des images

Procédure classique

1. Cliquez sur le bouton
2. Cliquez sur le bouton Explorer le serveur
   
3. Dans l'interface vous pourrez organiser vos images dans des dossiers. Voici un exemple d'import d'image
   1. Cliquer sur nouveau dossier pour la ranger dans un dossier que l'on appelera Demonstration
      
   2. Entrez donc le nom de votre dossier:
      
   3. Entrez dans le dossier nouvellement créer:
      
   4. Choisissez l'image stoqué sur votre ordinateur via le bouton Parcourir... puis cliquez sur Télécharger pour importer l'image:
      
   5. Vous devriez avoir une fenêtre confirmant l'import de votre image:
   6. Vous pouvez ainsi sélectionner votre image:
      
   7. Valider en cliquant sur OK:
      

Rendre votre image compatible sur les supports mobiles

Pour bien comprendre le problème: un écran de téléphone fait environ 400px de large, l'image importée dans l'exemple précédent fait 1280px de large et donc dépasserai largement de l'écran:

Ci dessus, on peut observer que sans configurer l'image, il y a la majorité de sa surface qui est perdu (représenté en gris).

1. Pour résoudre ce problème, revenez dans les propriété de l'image:
   
2. Supprimer la largeur et la hauteur (laisser ces deux champs vides).
3. Puis cliquez sur l'onglet Avancé:
   
4. Vous devez saisir "img-responsive" dans le champs Classe CSS:
   
   La classe img-responsive limite l'image à 100% de la largeur de l'écran tout en adaptant la hauteur automatiquement.

Votre image est prête.