Difference between revisions of "image"

From GeneWeb
Jump to: navigation, search
(%s = base?var_contextuelles et non ip:port)
m (plus léger (explication %macro en triple) ; s/base/mybase/ pour moins de confusion entre le dir de base bases et base…)
Line 1: Line 1:
 
{{DISPLAYTITLE:Inserting images in notes}}
 
{{DISPLAYTITLE:Inserting images in notes}}
 
{{languages|Images}}
 
{{languages|Images}}
Individual and general notes in GeneWeb can contain HTML links to images or direct images. Here are the different possibilities:
+
Individual and main notes in GeneWeb can contain links to images or direct images. Here are the different possibilities using HTML:
* text link to an image: <code><a href="%sm=IMH;s=image-file-name.jpg">displayed text</a></code>
+
* text link to an image: {{c|1=<a href="%sm=IMH;s=image.jpg">text link</a>}}
* direct image: <code><img src="%sm=IM;s=full-image.jpg" title="mouseover description" alt="alternative description"></code>
+
* direct image: <code><img src="%sm=IM;s=image.jpg" title="mouseover description" alt="alternative description"></code>
 
* button image: <code><a href="%sm=IMH;s=full-image.jpg"><img src="%sm=IM;s=thumb-image.jpg"></a></code>
 
* button image: <code><a href="%sm=IMH;s=full-image.jpg"><img src="%sm=IM;s=thumb-image.jpg"></a></code>
* text link to image maps: <code><a href="%sm=SRC;v=full-image">displayed text or button image</a></code>
+
* text link to image maps: <code><a href="%sm=SRC;v=file">text link or button image</a></code>
  
The HTML tag {{c|img}} must present in {{c|bases/tags.txt}} (see [[tags]]).
+
GeneWeb replace the [[macros]] {{c|%s}} by the appropriate URL keeping current base/template/language parameters and the {{c|1=s=}} parameter refers to folder {{c|bases/src/mybase/images/}} (for example for the base {{c|Grimaldi}}, in {{c|bases/src/grimaldi/images/}}).
  
'''gwd''' reads those commands and replaces the [[macros]] {{c|%s}} by the appropriate URL. The {{c|1=s=}} parameter refers to images in {{c|GeneWeb-Bases/src/base/images/}} folder. For exemple for the base {{c|Grimaldi}}, in {{c|bases/src/grimaldi/images/}}.
+
To work the HTML tag {{c|img}} must present in {{c|bases/tags.txt}} (see [[tags]]).
 
+
In the case of image maps, '''gwd''' looks for the file {{c|full-image.txt}} in {{c|GeneWeb-Bases/src/base}}, scans the corresponding text, replacing '''%''' macros by their values, and passes the resulting HTML back to the browser.  
+
  
 
== Image maps example ==
 
== Image maps example ==
 +
In the case of image maps, gwd looks for {{c|bases/src/mybase/file.txt}}, replace macros by their values, and passes the resulting HTML back to the browser.
 +
 
An example of such a text file is:
 
An example of such a text file is:
 
<pre>
 
<pre>
Line 50: Line 50:
 
</pre>  
 
</pre>  
  
This example, opens an image file named <code>GeneWeb-Bases/src/base/images/grande-ile.jpg</code> using the HTML <code><map></code> named <code>test-chausey</code>.
+
This example, opens an image file named <code>bases/src/mybase/images/grande-ile.jpg</code> using the HTML <code><map></code> named <code>test-chausey</code>.
  
In this <code><map></code>, several clickable areas have been defined (using the '''Mapedit''' tool for instance), and with each area is associated a <code>href</code> HTML command. Since the <code>GeneWeb-Bases/src/base/grande-ile.txt</code> file has been processed by '''gwd''', occurrences of '''%s''' have been replaced by the appropriate address.
+
In this <code><map></code>, several clickable areas have been defined (using the '''Mapedit''' tool for instance), and with each area is associated a <code>href</code> HTML command. Since the <code>bases/src/mybase/grande-ile.txt</code> file has been processed by '''gwd''', occurrences of '''%s''' have been replaced by the appropriate address.
  
 
Through the example above, one can see that the <code>href</code> command can be any valid GeneWeb URL.
 
Through the example above, one can see that the <code>href</code> command can be any valid GeneWeb URL.

Revision as of 22:34, 24 October 2015

150px-Geographylogo svg.png Language: English • français

Individual and main notes in GeneWeb can contain links to images or direct images. Here are the different possibilities using HTML:

  • text link to an image: <a href="%sm=IMH;s=image.jpg">text link</a>
  • direct image: <img src="%sm=IM;s=image.jpg" title="mouseover description" alt="alternative description">
  • button image: <a href="%sm=IMH;s=full-image.jpg"><img src="%sm=IM;s=thumb-image.jpg"></a>
  • text link to image maps: <a href="%sm=SRC;v=file">text link or button image</a>

GeneWeb replace the macros %s by the appropriate URL keeping current base/template/language parameters and the s= parameter refers to folder bases/src/mybase/images/ (for example for the base Grimaldi, in bases/src/grimaldi/images/).

To work the HTML tag img must present in bases/tags.txt (see tags).

Image maps example

In the case of image maps, gwd looks for bases/src/mybase/file.txt, replace macros by their values, and passes the resulting HTML back to the browser.

An example of such a text file is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<title>
Grande Ile
</title>
<html>
%rcss
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<table border="1" width="100%" height="60">
<tr align="left">
<td width="100%" height="16" bgcolor="#008080"><p align="center">
<font face="Garamond" color="#FFFFFFF"><big><big><strong><big>
La Grande Ile</font></big></strong></big></big></font>
</td>
</tr>
</table>
<p><img SRC="%sm=IM;s=grande-ile.jpg" usemap="#test-chausey" border="0"> <br>
<font size="-1"><em>(Carte construite à partir de celle disponible sur le site réalisé par P. Marques :
<a href="http://www.bretagne.iufm.fr/mentiontic19992000/productions/marques/pmarques/DATA/avpropos.htm"> www.bretagne.iufm.fr </a>).
</em></font>
<hr>
</p>
En déplaçant le curseur sur les lieux significatifs de l'île, vous verrez (peut être!) apparaitre son nom, et un click vous emmènera vers une description plus détaillée et des photos.

<map name="test-chausey">
	<area shape="poly" coords="206,272,212,255,241,254,240,291,217,290" href="%sm=NG;n=le+vieux+fort" alt="Le Vieux Fort">
	<area shape="poly" coords="132,75,170,78,168,110,132,111" href="%sm=NG;n=le+semaphore" alt="Le S̩maphore">
	<area shape="rect" coords="345,307,433,347" href="%sm=SRC;v=plan-pointe-du-phare">
	<area shape="rect" coords="359,194,485,213" href="%sp=la+maison;n=pilet">
</map>
</body>
</html>

This example, opens an image file named bases/src/mybase/images/grande-ile.jpg using the HTML <map> named test-chausey.

In this <map>, several clickable areas have been defined (using the Mapedit tool for instance), and with each area is associated a href HTML command. Since the bases/src/mybase/grande-ile.txt file has been processed by gwd, occurrences of %s have been replaced by the appropriate address.

Through the example above, one can see that the href command can be any valid GeneWeb URL.