Difference between revisions of "image"

From GeneWeb
Jump to: navigation, search
m (better internal link !)
 
(11 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{DISPLAYTITLE:Inserting images in notes}}
 
{{DISPLAYTITLE:Inserting images in notes}}
 +
{{languages|Images}}
 +
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: {{c|1=<a href="%sm=IMH;s=image.jpg">text link</a>}}
 +
* 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>
 +
* text link to image maps: <code><a href="%sm=SRC;v=file">text link or button image</a></code>
  
It is possible to insert links to images or direct images within notes. This is achieved by inserting in the body of the note the following command (verify that the corresponding HTML commands are present in the tags.txt file - see [[Tags]]):
 
  
* link to an image: <code><a href="%sm=IMH;s=image-file-name.jpg">displayed text</a></code>
+
The {{c|1=s=}} parameter refers to folder {{c|bases/src/mybase/images/}} where alternative images for notes can be stored. The three subdirs of this path must be created by hand. Note that {{c|/bases/}} directory is the name of the [[bases|folder where all the databases are stored]] and that {{c|mybase}} is the name of the database where you want to place images. For example for the test base {{c|Grimaldi}} on default installation, images must go in {{c|bases/src/grimaldi/images/}}. GeneWeb replace the [[macros]] {{c|%s}} by the appropriate URL that keeps current base name, template and language parameters.
* direct image : <code><img SRC="%sm=IM;s=full-image.jpg"></code>
+
* button image: <code><a href="%sm=IMH;s=full-image.jpg"><img SRC="%sm=IM;s=vignette-image.jpg"></a></code>
+
* clickable image: <code><a href="%sm=SRC;v=full-image">displayed text or button image</a></code>
+
  
'''gwd''' reads those commands and replaces '''%s''' by the appropriate server address (localhost:2317 most often).
+
Style information can be added as needed.
Images designated by the '''s=''' parameter are found in the <code>GeneWeb-Bases/src/base/images</code> folder.
+
  
In the case of clickable images, '''gwd''' looks for the file '''full-image.txt''' in <code>GeneWeb-Bases/src/base</code>, scans the corresponding text, replacing '''%''' macros (see [[Macros/fr|Macros]]) by their values, and passes the resulting HTML back to the browser.  
+
To work the HTML tag {{c|img}} must present in {{c|bases/tags.txt}} (see [[tags]]).
 +
 
 +
== 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:
Line 49: Line 53:
 
</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.
 +
 +
{{manual}}
 +
 +
[[Category:Manual]]

Latest revision as of 10:25, 1 December 2016

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>


The s= parameter refers to folder bases/src/mybase/images/ where alternative images for notes can be stored. The three subdirs of this path must be created by hand. Note that /bases/ directory is the name of the folder where all the databases are stored and that mybase is the name of the database where you want to place images. For example for the test base Grimaldi on default installation, images must go in bases/src/grimaldi/images/. GeneWeb replace the macros %s by the appropriate URL that keeps current base name, template and language parameters.

Style information can be added as needed.

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.


GeneWeb Manual

Rembrandt Old Man Reading a Book.jpg

Use and manage genealogical databases

Technical annex