Chronique familiale




La chronique familiale pas à pas

Si vous êtes Premium

 

 Accéder au module photo



Comme je l'ai dit sur la page précédente, si vous êtes Premium, vous pouvez héberger directement vos images chez Geneanet. Nous allons voir comment procéder :

- depuis n'importe quelle page de votre chronique, cliquez sur (modifier) et accédez à la fenêtre de saisie :


fenêtre de saisie


- cliquez ensuite sur le bouton bouton d'accès au module image :


clic sur le bouton image




Et vous accédez à cette boite de dialogue :


boite de dialogue de téléchargement et d'insertion d'images


 

 Créer des dossiers



Avant toute autre chose, nous allons créer des dossiers. En effet pas plus que vous ne rangez chez vous les chaussettes et les petites cuillères dans le même tiroir, il n'est pas judicieux de le faire pour des images.
Et si vous devez un jour héberger beaucoup d'images sur votre chronique, il sera plus facile de les retrouver si elles sont classées dans des dossiers et sous-dossiers de façon logique.

Cliquez sur ce bouton bouton de création de dossier ici :


clic sur le bouton dossier




La fenêtre qui s'ouvre va vous permettre de créer des dossiers :


boite de dialogue création de dossier




Nommez votre dossier en évitant les accents et les caractères spéciaux puis validez :


nommage du dossier




Votre dossier est créé :


dossier créé




Vous pouvez ainsi créer autant de dossiers que vous le souhaitez :


plusieurs dossiers créés




D'un clic sur le dossier, vous ouvrez celui-ci. Vous pourrez alors créer un sous-dossier dans ce dossier et même si vous le souhaitez, créer encore un sous-dossier en ouvrant ce dernier et ainsi de suite 1 :


clic sur un dossier




À chaque clic sur ce bouton bouton pour remonter dans l'arborescence, vous remonterez d'un niveau dans l'arborescence de vos dossiers :


clic sur le bouton remonter




Si vous souhaitez supprimer un dossier, cliquez sur ce bouton bouton poubelle pour supprimer un dossier :


clic sur le bouton poubelle




On vous demandera de confirmer la suppression. Soyez quand même vigilants, une fois le dossier supprimé, il n'y a pas de retour en arrière possible :


 fenêtre de confirmation de suppression


 

 Télécharger des images



Nous avons vu comment ouvrir un dossier :


ouverture d'un dossier



Voyons maintenant comment mettre des images dans ce dossier 2, autrement dit les héberger chez Geneanet 3 :

- Cliquer sur "Choisir un fichier" :


clic sur choisir un fichier




- Choisir l'image dans votre ordinateur :

1 - Sélectionner l'image

2 - Cliquez sur "Ouvrir"


clic sur une image puis sur ouvrir




- Téléchargez l'image :

1 - Le nom de l'image sélectionnée apparait

2 - Cliquez sur "Télécharger"


clic sur télécharger




- Votre image est hébergée chez Geneanet :


image téléchargée




1 - La poubelle sert (comme pour les dossiers) à supprimer l'image

2 - Le crayon sert à modifier les images 4


Si vous respectez ces notions de taille et surtout de "poids" des images, vous pourrez en héberger des centaines sur Geneanet.
 

 Insérer les images dans la chronique


- Rendez vous sur la page de votre chronique où vous souhaitez ajouter des photos ;

- Cliquez sur (modifier) ;

- Positionnez le curseur à l'endroit où vous souhaitez insérer la photo ;

- Cliquez sur le bouton de gestion des images bouton d'accès au module images et recherchez ensuite l'image que vous souhaitez utiliser :


1 - Cliquez sur l'image

2 - Son nom s'affiche en dessous

3 - Cliquez sur "Valider"


clic sur l'image, le nom apparait, clic sur valider



Et comme on peut le voir sur cette page, ça fonctionne : Une image dans la chronique ↗

 

 Mise en forme de l'image


Il y a quand même un peu de travail pour rendre cette présentation un peu plus attrayante. Reprenons avant la validation :

1 - Le nom de l'image est celui que vous lui avez donné au départ, il n'est pas utile de le modifier.

2 - Vous pouvez modifier le texte alternatif 5 à votre convenance.


changement du texte alternatif




Vous voudrez peut-être modifier la taille de l'image :


1 - Assurez-vous que "Conserver les proportions" est coché.

2 - Modifiez une seule des dimensions.

3 - Cliquez sur le maillon, l'autre dimension s'adapte automatiquement.


procédure de changement de taille




Vous pouvez spécifier un espacement entre votre image et les autres éléments de la page :


1 - Spécifiez un espacement vertical en pixels.

2 - Procédez de même pour l'espacement horizontal.

3 - N'indiquez rien pour la bordure, cette option ne fonctionne plus.


procédure de spécification d'espacement



 

 Mise en page de l'image


Vous pouvez définir la façon dont votre image sera placée dans la page et alignée par rapport aux autres éléments.
Pour ce faire, cliquez sur la flèche noire (▼) et sélectionnez une option dans le menu déroulant :


procédure d'alignement




Trois options sont à retenir :


 Gauche

L'image sera alignée le long de la marge gauche. Le texte se situera à droite dans la place restante. Il sera cependant nécessaire de mettre ce texte en page pour obtenir une présentation soignée (justifié par exemple comme dans l'exemple suivant) :

Alignement de l'image à gauche ↗

On s'aperçoit que l'image est bien alignée à gauche et séparée du bord et du texte (verticalement et horizontalement) par une marge de 20 pixels que j'ai spécifiée. Le texte est situé à droite de l'image et continue sur toute la largeur après avoir dépassé le bas de cette dernière.


 Droite

L'image sera alignée le long de la marge droite. Le texte sera situé à gauche de l'image dans la place laissée libre par celle-ci et continuera au-dessous sur toute la largeur :

Alignement de l'image à droite ↗

 

 Par défaut 6

Aucun alignement ne sera déterminé et l'image viendra à la suite des autres éléments de la page. C'est cependant l'alignement à privilégier si nous voulons réaliser notre propre mise en page et notamment centrer 7 l'image dans la page.

Il existe pour ce faire plusieurs possibilités, notamment :


- Comme nous l'avons fait pour aligner du texte ↗, nous pouvons utiliser la balise <p> comme ceci :

<p style="text-align:center">Mon image</p>


- Ou utiliser la balise <div>...</div>8 avec la propriété margin et la valeur auto.

Cette valeur va spécifier au navigateur de créer des marges égales à droite et à gauche (centrer la balise <div>) à la condition d'avoir affecté une largeur à celle-ci.
On reprendra donc la largeur de l'image dans la propriété width (en spécifiant bien le type d'unité, ici "px") et le code se présentera comme ceci :

<div style="margin:auto; width:largeur de l'image en px;">Mon image</div>


Dans les deux cas, positionnez le curseur dans la balise <p> ou <div> :


 alignement avec la balise div



Insérez votre image depuis le module de gestion bouton d'accès au module images (avec l'option "par défaut").


Et vous obtenez ceci :

Image centrée dans la page ↗


Vous pouvez oublier toutes les autres options d'alignement qui, soit ne présentent pas grand intérêt, soit ne fonctionnent plus parce que les balises que génère le logiciel ne sont plus reconnues !


Vous pouvez également insérer votre image n'importe où dans un texte, en plaçant le curseur au milieu de celui-ci avant de valider, comme ci-dessous :


insertion d'une image dans le texte



Voici ce que vous obtenez (ici avec un alignement à gauche) :

Image dans le corps du texte ↗


Nous avons fait le tour des options de mise en page des images, il ne vous reste qu'à valider pour la voir s'afficher dans votre chronique.
 

 Récupérer l'adresse d'une image


Nous verrons plus loin dans le tutoriel qu'il peut s'avérer utile de récupérer l'adresse de ces images pour les mettre ailleurs que sur la chronique.

Je vous explique sur cette page comment procéder : Récupérer l'adresse d'une image ↗

 

 Notes

 
1. J'ai créé ainsi à titre d'essai une arborescence de dix niveaux de sous-dossiers sans que le logiciel y voit d'inconvénient ; je me suis arrêté parce que je ne voyais pas l'intérêt de continuer, en effet je ne pense pas que vous aurez besoin d'aller aussi loin.
 
2. Ou pas d'ailleurs, vous pouvez fort bien si vous en avez très peu, stocker vos images "en vrac" sans avoir créé de dossier.
 
3. Quelques débutants croient qu'il suffit d'avoir stocké les images sur l'ordinateur et d'avoir copié dans leur chronique le chemin pour y accéder, pour qu'elles s'affichent dans cette dernière.
Ce n'est pas le cas ! Pour des raisons évidentes de sécurité, aucun site web n'a accès (sauf piratage) aux documents stockés sur votre ordinateur.
 
4. Il semble que cette fonctionnalité soit désactivée pour l'instant.
 
5. Le texte alternatif a deux fonctions essentielles :

- remplacer l'image lorsque celle-ci ne peut être affichée pour des raisons techniques ;

- annoncer le contenu de l'image ou sa fonction aux personnes souffrant de troubles visuels et qui de ce fait ne la voient pas.

Ne serait-ce que pour cette dernière raison, essayez de toujours mettre un texte alternatif.

Essayez de faire un descriptif aussi précis et concis que possible de l'image. Exemple : Paysage de garrigue dans le désert des Agriates

Exemple de rendu d'un : Texte alternatif ↗

 
6. L'informaticien qui a rédigé le menu était persuadé que défaut s'écrit "default" comme en anglais mais, pris de remords, s'est quand même senti obligé d'ajouter un accent. Soyons indulgents !
 
7. La balise <center> qui permettait de centrer n'importe quel élément d'une page est dépréciée et même si elle est encore reconnue par les navigateurs, il est préférable d'adopter d'ores et déjà de bonnes pratiques et de ne plus l'utiliser.
 
8. La balise <div> (pour division du document) crée dans la page un conteneur, une "boite" au contenu de laquelle on peut affecter un style. Nous consacrerons plus loin dans le tutoriel une page à cette balise.



───── oOo ─────


Index des pages