Useful HTML tags for iNaturalist comments and other text - wiki

I’ve also had issues scrolling with embedded images. They look like they’re cut off, but if you’re really careful about it, you can actually get them to scroll. It does seem like there’s room for improvement though.

2 Likes

I have made a blog post on my Project’s page and am using html tables in the post. I have much blank space before each table and have no idea how to remove it or change my code to get around the problem. Here’s a link to the blog post https://www.inaturalist.org/posts/29791-2019-review-of-nature-at-southwest-nature-preserve. Not sure if you can see the code from here, but you can see how ugly it is! Below is an excerpt from the code.

<a href="/observations/19456335">First observation of 2019:  made by Lynn Healy (common buckeye (Junonia coenia)) on January 5.</a>
<a href="/observations/37081549"> Last observation of 2019: made by Jim Frisinger (Hygroscopic Earthstar (Astraeus hygrometricus)) on December 29.</a>
<table width=50%><tr><th>Top Observers during 2019:</th></tr>
<tr><th>Rank</th><th>iNaturalist ID</th><th>Name</th><th># Observations</th><th># Species</th></tr>
<tr><td>1</td><td>Brentano</td><td>Brent Franklin</td><td>591</td><td>229</td></tr>
<tr><td>2</td><td>Bob777</td><td>Bob O’Kennon</td><td>	251</td><td>161</td></tr>
<tr><td>3</td><td>Joshmols</td><td>Jim Frisinger</td><td>204</td><td>160</td></tr>
<tr><td>4</td><td>Charley</td><td>Charley Amos</td><td>137</td><td>92</td></tr>
<tr><td>5</td><td>Pynklynx</td><td>	</td><td>133</td><td>59</td></tr>
<tr><td>6</td><td>Postoak</td><td>Jan Miller</td><td>	131</td><td>76</td></tr>
</table>
1 Like

I don’t think it likes the width parameter. I have struck this before on a journal post where I was trying to use tables for layout, and couldn’t get it to work. Would be interesting to see if anyone has been able to solve this!

1 Like

Yes, I had the big space problem too! It is very easy to fix, though not intuitive ;-)

At the bottom of the post text area is
Formatting
o Simple o None

Simple is the default, but you have to choose None. Ta dah! BUT, bear in mind that if you do this, you have to put in ALL html tags including < p > (paragraph) tags etc.

2 Likes

YAY! It needs a little cleanup, but it’s soooo much better looking! Thank you!

2 Likes

Still cannot make it scroll, how did you manage?

1 Like

I’m honestly not sure. I thought maybe it had to be over at the side of the screen, but that’s not it, I can get it to work in the middle too. It mostly just doesn’t work and then once in a while it does. Sorry!

1 Like

I’m having trouble with the target="_blank" in a journal post preview. The same text opens a new tab in an observation comment or a forum post, but in the journal preview it doesn’t work. The link opens but not in a new tab. @karoopixie seemed to suggest on this post that it works. Does it just not work until it gets published?

Here’s some sample text; not sure if I’m just not putting it in right.
Cooper JG 1872
<a href="https://www.biodiversitylibrary.org/page/1693450#page/148/mode/1up" target="_blank">Cooper JG 1872</a>

I think that is what’s going on, although I don’t know why the preview should behave differently. It looks like you have the html correct in your example.

@thomaseverest I did notice that this wasn’t working anymore even on published posts. I am still investigating. I tried adding rel="nofollow noreferrer" but this didn’t make a difference.

Perhaps @kueda can tell us what’s going on?

2 Likes

I’ll add rel and target to the allowed attributes for journal posts since we seem to allow them in comments. FWIW, I generally do not think it’s a good idea to use target="_blank" unless the user is going to lose data by leaving the page. If that’s not the case, the decision to open a link in the current window or a new tab should be up to the user. Is there a lot of iNat code that uses target="_blank"? There is indeed. Do I always get my way? No I do not.

8 Likes

Thank you, Ken-ichi :-)

Please can I ask that those attributes are allowed for profiles as well.

1 Like

Note: the topic has been edited to reflect the July 2020 implementation of Markdown in some areas of iNaturalist. Feel free to edit the wiki further if more things become outdated.

2 Likes

I’m not sure if this is the right place to ask but hopefully someone can point me in the right direction. I’ve noticed that the HTML code for making something show up in italics in image descriptions doesn’t work for me any more. This bothers me since scientific names are supposed to be in italics, but it’s no longer showing like that. (I’m using Firefox as a browser and checked on two computers, same result.) This seems to have happened fairly recently but I’m not sure exactly when I noticed it for the first time. Is there a way to get the italics back for descriptions/comments with HTML coding?

There is a new Mark down scheme you can use:
https://www.inaturalist.org/posts/38475-less-agreeable-observations-more-agreeable-text-formatting

(Ignore the bit about ID Agreeing as that was rolled back)

1 Like

Thanks, I saw that. Although it says HTML tags should still work so I’m not sure if this not working any more is a bug or by design. It also doesn’t help with my 3000+ old observations with now outdated formatting. I just don’t have the time to go through and manually change to a new code on those. And it’s annoying when importing from Flickr where I have descriptions marked with HTML code. It seems like this is something that could/should be fixed by some other means, ideally by making sure HTML tags will still work as intended.

I agree, and suggest that you submit a bug report here on the forum. Please include URLs to some affected observations, or at least screen shots of what you are seeing.

EDIT: actually, before submitting a new bug report, check the topics here and see if any fit your situation. If so, please chime in there instead of submitting a new report. Thanks

2 Likes

I’m looking for tips to improve the appearance/formatting of this new journal post. Can I use staggered indents?

https://www.inaturalist.org/journal/egordon88/56257-key-to-penstemon-in-new-mexico

i think the usual way to format a dichotomous key is to use what is essentially a 3-column table, where the left column contains the starting sequence, the middle column contains descriptions of possible paths, and the right column contains the destination sequence or final taxon.

here’s an example key for Commelina from FNA: http://floranorthamerica.org/Commelina, and since you’re doing Penstemon, here’s FNA’s key for Penstemon: http://floranorthamerica.org/Penstemon.

1 Like

In the context of iNat journals, how do I pull that off (what tags)? My usage to date is limited to paragraphs, lists, and inserting images. Maybe, there’s an online tool that will autoformat a table if I supply the text …?