Here on the forum there are handy tools for creating hyperlinks, embedding images, etc. in our posts. We may eventually have such tools in iNaturalist itself, but for now, here are some basic html tags that will help you replicate what is available here on the forum (and maybe more!). Credit and thanks also to the iNaturalistNZ Tips & Tricks page which covers this and much more useful information!
- Once you save text with these tags, you should see appropriately formatted links, images, etc. If you still see the tags, then either the formatting wasn’t quite right (just edit and fix), or that particular location does not accept HTML tags.
- HTML tags require exact syntax - a missing bracket, letter, quote, etc., will give you a mysteriously non-functioning tag.
- Where a URL is needed as part of a tag, this can be copied and pasted out of the address bar of your web browser when you are at the desired web location, or right-clicked and copied from an existing link.
I am by no means an HTML guru, and there may be more nuances to how iNaturalist handles HTML, so this is a wiki topic to which anyone can contribute more and better advice.
A useful HTML primer
The most useful tags for iNaturalist are listed below. There are a lot more HTML tags available, most of which are not supported or needed in iNaturalist text.
Linking to another web page
<a href="web address (URL) of page, in quotes">Text to display on link</a>
<a href="http://plantsoftheworldonline.org">POWO</a> produces POWO
You don’t have to use HTML tags to link to a web page in iNaturalist. Any correctly formatted URL is automatically treated as a link by iNaturalist - it just won’t look as pretty:
To make the link open in a new tab (so that the page you’re on stays open), add the parameter
target="_blank". So your link will look like this:
<a href="http://plantsoftheworldonline.org" target="_blank">POWO</a>produces
POWO which, if clicked, should take you to a new browser tab or window, depending on your browser settings.
Linking across iNaturalist portals
For link URLs that come from inside one of the iNaturalist Network portals (see list below), it is best to use a relative address instead of a complete absolute address, so that users don’t get logged out trying to follow your link to a different portal. Just drop the initial
https://inaturalist.nz, etc. part of the URL.
For example, use the relative address
<a href="/observations/5598233">bristlecone pine</a>for bristlecone pine
instead of the absolute address
<a href="https://inaturalist.nz/observations/5598233">bristlecone pine</a>
Relative addresses work only for URLs starting with any of the following portal domains, and only from inside one of these domains:
https://inaturalist.nz(iNaturalist NZ — Mātaki Taiao)
…and others that may get added here in the future.
Relative iNaturalist links will not work to or from any other domains, including some associated with iNaturalist. For example, complete addresses must be used for links to or from:
https://static.inaturalist.org(iNaturalist photo storage location)
https://forum.inaturalist.org(this iNaturalist Forum)
Embedding an image
<img src="web address (URL) of image, in quotes, including ending .jpg, .png etc." width="500px">
<img src="https://live.staticflickr.com/4611/39953309384_0f407d6dd8_c.jpg" width="250px"> produces
- the width parameter is optional, but strongly recommended to keep larger images from blowing up too big on the page.
- a working
<img>tag can be included in the display portion of a hyperlink tag, like so:
<a href="url"><img src="url"></a>
<strong>Bold Text</strong> <b>Bold Text</b> <i>italic text</i> <s>strikeout text</s> <strong><i><s>Bold italic strikeout text</s></i></strong>
Looks like this:
Bold italic strikeout text
- Text formatting tags should be placed outside the link (
<a>) tags above if you want them to affect the link display. For example,
<b><a href="http://plantsoftheworldonline.org">POWO</a></b>produces POWO.
Horizontal Line Separator
The separators in this post are generated by putting the
<hr /> tag on a line all by itself, with an extra blank line afterward. (The Forum context seems to require that extra blank line for it to work.)
Tables can be used to lay out other elements on a page, such as having an image in the left cell and text in the right.
<table align=center border=1 cellpadding=5 cellspacing=5 width=80%> <tr> <th><b><i>Latrodectus katipo</i></b></th> <th>The "Black katipo"</th> </tr> <tr> <td><img src="https://static.inaturalist.org/photos/50191459/large.jpeg?1567474258" width=200></td> <td>The katipo is an endangered species of spider native to New Zealand. The black form is only found in the north, the red form in the south. This one here is from Gisborne, near the southern extent of it's range.</td> </tr> <tr> <td>cell 1 row 2</td> <td>cell 2 row 2</td> </tr> </table>
|Latrodectus katipo||The "Black katipo"|
|The katipo is an endangered species of spider native to New Zealand. The black form is only found in the north, the red form in the south. This one here is from Gisborne, near the southern extent of it's range.|
|cell 1 row 2||cell 2 row 2|
To experiment with various table formats:
We can help you with problems you might be having. Just comment below with the nature of the problem you are having, describe what you are trying to achieve, and include copied examples of what you have tried. To stop Discourse (this forum) trying to interpret your code, highlight it and click the “pre-formatted text” option in the forum editor (the
</> button). It should then show you in the preview pane what it looks like as code, rather than what it is being converted to by the forum.
The draft and preview options on journal posts, or here on forum posts, are also helpful to test and adjust your code, without actually saving or publishing anything. The preview pane will show what your code will look like to the outside world. Then you can just discard or delete your draft when you are done testing.