expo/expoweb
1
0
Fork 0
mirror of https://expo.survex.com/repositories/expoweb/.git/ synced 2026-03-27 15:11:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

<figure> and <figcaption> and relative and absolute URLs

Browse Source
This commit is contained in:
Philip Sargent
2023-04-05 14:32:36 +01:00
parent d36afac3c3
commit 75e49624d4
3 changed files with 46 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
handbook/computing/hbmanual1.html
View File

@@ -50,7 +50,7 @@ so you cannot use "Edit this page". These pages will not show "Edit this page" i
<p>Then once created, you can edit it the same way that you edit a pre-existing page.
<h3>Linking in New Pages</h3>
<p>You link your new page into the handbook by editing another page in which you want to create a link. For example if you have created a new page describing your wonderful new sleeping bag/hammock technique, then you might want to add a link in to <a href="../kitlist.html">Expo Personal Gear List</a>. Unfortunately the "create link" icon (a picture of 3 links of a chain) is disabled in the on-line editor so you would have to click on the HTML icon and insert the link by editing the HTML directly using an <em>&lt;a href="filename"&gt;</em> tag.
<p>You link your new page into the handbook by editing another page in which you want to create a link. For example if you have created a new page describing your wonderful new sleeping bag/hammock technique, then you might want to add a link in to <a href="../kitlist.html">Expo Personal Gear List</a>. Unfortunately the "create link" icon (a picture of 3 links of a chain) is disabled in the on-line editor so you would have to click on the HTML icon and insert the link by editing the HTML directly using an <em>&lt;a href="filename"&gt;</em> tag. See <a href="#images">Images: Relative and Absolute URLs</a> below for how to structure the URLs in the <var>href</var> attribute.
<h3>Conventions</h3>
[This should all be moved to a different page as it covers all files and names, just just the handbook pages.]
@@ -85,16 +85,44 @@ Otherwise it's easy to make pages that work on Windows, but which don't on Linux
<li> Never create two files spelt the same except for capitalisation. They will overwrite each other if edited on a Windows machine <em>without any warning</em>. This is particularly a problem for the filenames generated on phones for photographs.
</ul>
<h4>Images</h4>
<h4 id="images">Images: Relative and Absolute URLs</h4>
<ul>
<li>Older parts of the website have sub-folders "i/", "l/", and "t/" holding respectively<br />
i/ - the image file at full resolution (600px width usually)</br>
l/ - an html file which displays the full image with a caption and some description</br>
t/ - a thumbnail image which is usually used inside an &lt;a&gt; tag to link to the l/ html file.
</ul>
<p>When creating figures use one of these two constructions. The first with "rooted" URLs beginning with a "/":</p>
<code><pre>
&lt;figure class="onright"&gt;
&lt;a href="/piclinks/typing.htm"&gt;&lt;img src="/images/typing.jpg"&gt;&lt;/a&gt;
&lt;br&gt;&lt;figcaption&gt;Tony Rooke at computer in 1991 - in the old potato hut&lt;/figcaption&gt;
&lt;/figure&gt;</pre></code>
or, with "relative" URLs, where the URL does not start with a "/":
<code><pre>
&lt;figure class="onleft"&gt;
&lt;a href="../l/hut-cables.html"&gt;&lt;img width=200 src="../i/acer-blue-aspire-one-netbook.jpg"&gt;&lt;/a&gt;
&lt;br&gt;&lt;figcaption&gt;AA1 netbook&lt;br /&gt; sits high up out of reach&lt;br /&gt;
(ours is less shiny)&lt;/figcaption&gt;
&lt;/figure&gt;
</pre></code>
<ul>
<li>"Rooted" URLs will work werever your fragment of HTML ends up. This root is the always the root of the <var>:expoweb:</var> repo, i.e. <var>/home/expo/expoweb/</var>.
<li>"Relative" URLs will be relative to wherever the webpage <em>is being viewed from</em> as located in the published
strcuture. This is often not where you think it is (especially for individual logbook entries and cave descriptions) but for handbook pages it is straightforward: you can see the location in the browser URL bar and for this page it is in the folder <var>"/handbook/computing/"</var>.
</ul>
<p>
P.S. In older pages that have not been updated recently, you may see this archaic form:</p>
<code><pre>
&lt;a href="/years/2018/logbook.html#t2018-08-03w"&gt;&lt;img src="i/logbookpage.jpg" class="onright"&gt;&lt;/a&gt;
</pre></code>
Where the <var>class="onright"</var> attribute is set on the IMG tag and not on the FIGURE tag or an enclosing DIV tag. If you find one of those in a page you are editing, please update it to use the current &lt;figure&gt; and &lt;figcaption&gt; structure. [Note the mixed URLs in this example, one is absolute and one is relative: this is not a recommended style.]
<hr />
<h3 id="tidy">Tidying up and committing the edits</h3>
<p>'Edit This Page' edits the file served on the web, saves it, adds it to the list of proposed git updates, then finally does the git 'commit' on the server. Things can go wrong at each step of the process.