Travailler avec des images

Les images dans votre site Web

Les images sont des gifs et des jpegs que vous désirez utiliser dans votre site Web. Puisque l'un des principaux avantages de Frontier dans la gestion d'un site Web est sa capacité à contenir les différents éléments du site jusqu'à ce que celui-ci soit rendu, Frontier permet également d'importer gifs et jpegs dans la table du site.

Quand Frontier rend une page qui contient une image, il crée un fichier de type gif ou jpeg sur votre disque et génère la balise HTML <img> par le biais d'une macro très pratique.

Charger une image

Essayons. Copiez sur votre disque dur l'image ci-dessous (cliquez dessus avec le bouton droit de la souris, cliquez et attendez qu'apparaisse le menu contextuel, ou glissez-la sur le bureau -- selon votre plateforme).

À partir du menu Web, choisissez Load Image File..., et quand le dialogue apparaît, sélectionnez ce gif. Après un instant, la table user.html.images s'ouvre et contient au format binaire, une copie de ce gif simplement intitulé "siteScriptedWithFrontier". C'est un peu longuet, alors renommez-le "site"

Vous pourriez laisser là le gif, mais il est probablement plus commode de le mettre dans votre site. Alors faites-le. Allez à monPremierSite et choisissez dans le menu Table, New Sub-Table.

Appelez cette table "images" (sans les guillemets). L'exactitude du nom est primordiale. Revenez dans user.html.images, sélectionnez, puis coupez l'entrée "site". Enfin, collez-la dans la table monPremierSite.images (suprimez l'entrée "item #1" si elle est encore là).

Il y un moyen plus rapide pour importer une image. Par défaut, les images sont insérées dans la table user.html.images. Mais si vous avez sélectionné une table de la base de données quand vous choisissez le sous-menu Load Image File, l'image sera alors insérée dans cette table. Vous pouvez à présent sélectionner websites.monPremierSite.images avant d'importer une image, ce qui vous évitera de la copier et la coller comme dans l'exemple précédent.

La macro imageRef

À présent, allez dans monPremierSite.#template, et ajoutez une ligne avant la ligne de pageFooter. La nouvelle ligne devrait être comme suit :

    {imageRef("site")}

Maintenant, allez à monPremierSite.default, choisissez "View in Browser" dans le menu "Web", et voyez ce que ça donne dans votre fureteur. Presto ! Le gif apparaît dans votre page Web.

Tout a été pris en charge par la macro imageRef. Premièrement, imgeRef a créé sur le disque le fichier de type gif dans un dossier images, puis elle a créé la balise HTML <img> pointant sur le nouveau fichier, et pour finir l'a substituée à l'appel de macro dans le HTML de votre page.

(Le gif original, à partir duquel vous avez chargé votre image dans la base de données, est désormais complètement inutile et vous pouvez même le supprimer si vous le désirez. Vous en avez à présent une copie dans la base de données qui pourra être générée lorsque vous en aurez besoin.)

Faites attention à ne pas faire d'erreur dans la syntaxe de l'appel de la macro imageRef. Les erreurs les plus communes sont l'oubli de guillemets, et l'omission de la parenthèse ou de l'accolade finales.

Les options d'imageRef

Vous savez probablement qu'une balise <img> peut avoir un certain nombre de paramètres, en particulier : alt, align, height, width, border, hspace, vspace, usesmap et ismap. La macro imageRef détermine automatiquement la hauteur et la largeur correctes de l'image et choisit par défaut la valeur zéro pour le contour de l'image (pas de bordure).

Libre à vous de déterminer les valeurs de alt, hspace, align et usemap. Si vous ne le faites pas, Frontier déterminera une valeur raisonnable pour alt, afin que du texte apparaisse aux lecteurs ne recevant pas les images. Il ne fournit aucune valeur pour les autres paramètres.

Pour fournir une valeur, utilisez son nom suivi de deux points (:) et la valeur, le tout séparé des autres valeurs par une virgule -- alt est une exception, il faut utiliser à sa place "explanation". Par exemple, ceci est un appel de macro valide :

    {imageRef("site", explanation:"Logo", align:"middle")}

Vous pouvez avoir une table image dans chaque sous-table de votre site. La macro imageRef regardera d'abord dans la table images qui est dans la même table que la page que vous êtes en train de rendre. Si elle n'y trouve pas votre image, elle cherchera une table d'images dans la table qui la contient, et ainsi de suite jusqu'à ce qu'elle ait atteint le niveau supérieur du site.

Vous pouvez tirer parti de ce procédé pour organiser vos images et leur donner la même capacité de hiérarchisation que celle des directives. Une image de la table "images" se trouvant dans la même table que la page qui est en train d'être construire supplante une image du même nom à un niveau supérieur.

Un autre avantage est de garder les images où bon vous semble dans la base de données. Supposons que nous ayons laissé notre gif à user.html.images. Nous pourrions alors dire:

    {imageRef(@user.html.images.site)}

Notez que la syntaxe est différente, il y a un "@" et pas de guillemets pour entourer le nom de l'entrée de la base de données. Quand vous utilisez cette syntaxe, Frontier ne met pas la version du gif qui va sur le disque dans un dossier image, mais simplement à côté du document HTML qu'il est en train de construire.

Les images en arrière-plan (la balise HTML BACKGROUND) sont traités d'une manière similaires. Il y a une directive #background qui fonctionne à peu de choses près comme la macro imageRef.

Pour utiliser une image comme arrière-plan, importez un gif dans vote site Web. Puis créez une directive #background avec le nom de l'image sans son suffixe.

Par exemple, cette introduction a pour directive #background "bgYellow". L'image qui sert d'arrière-plan est créée sur le disque sous le nom de "bgYellow.gif" et est automatiquement placé dans le dossier images.