I didn’t succeed because of the errors jdmore found, I expect. I was using a different image, and thought perhaps I needed that second number, but it seems that was not the case.
But - ah, I am confused now. When I read jd’s earlier reply I assumed the bluetooth keyboard with tablet produced funny characters. I remembered to quote the link that didn’t work using the </> button so you could see the code…but I didn’t expect to see the two words that then appeared - Reformatted Text, I think it was. So I deleted those. Perhaps that mucked up the characters?
Thanks for info on highlighting text before pressing the </> button.
I have been trying for an hour with all kinds of variations including both jdmore’s example above, with various modifications, and with the example from Tips and Tricks,
with various modifications (eg I didn’t know what to do with the word “Scale” and tried adding the width bit instead of it) and at last have succeeded, with this, <img src="https://static.inaturalist.org/photos/33536988/small.jpeg? width="500px">
NB The space is present before “width”. however it appears to work just as well without it, as in my first successful attempt
As jdmore said, the second number in my first successful attempt was not necessary <img src="https://static.inaturalist.org/photos/50495409/large.jpeg?1567766075"width="500px">
and i have no idea where i got it from…
It came from the copy and paste of the url. iNat tacks it onto the end of the url, probably as some internal tracking thing or perhaps to do with the recent change on image brightness… dunno… doesn’t matter :)
You can delete the question mark as well, that simply feeds the “parameter” (the extra number) to the page processing it.
you were missing the file format, which is part of the name, in this case .jpg. In the first case, you are just inserting an image, the word “scale” from the example you copied was a descriptive text that would appear instead of the url when doing the linking example (2nd here). In the corrected linking example, note I include a line break tag to put the description below the image instead of beside it, and also that I move the description to inside the ending “anchor tag” (the </a>). Anchor tags (for linking) have an opening and a closing tag, so they need to be in pairs :) I replaced “scale” with “Image Description” which in the example you copied from was referring to insect scale, ie it was a description of the image or link, and had nothing to do with the scale (size) of the image!
[edit: the link to the html primer I gave above has “Try it out” pages that let you experiment with the tags and see how they render. If you don’t have much experience programming, then it would be well worth spending some time playing with that feature so that you get a better feel of what “breaks” the code. In a lot of cases it will be simple syntax things, which basically means getting the fullstops and brackets in the right place etc. Please keep in mind that this topic is about useful html tags to use, assuming you know how to use html. It’s not really on topic to be learning about html here though. You can absolutely direct message myself, and I would assume Jim and others would also be willing to help in a more direct manner.]
@jdmore I think it would be a good thing to add something like this to the tut intro:
“These tips are for people who already have some idea of how to use/code html. This is not a tutorial on how to learn html - for that we suggest you go to W3Schools.”
I moved @kiwifergus’s section on w3schools from the bottom to the top, and added a few more specific links. Feel free to edit the wiki further if you see other helpful changes.
That’s not the case at all. If I am not mistaken jdmore started this tut in order to teach me, and of course others, the html necessary to use features of iNat. He has succeeded with most of the tips I have tried out successfully. The one on adding an image needs a little clarification.
Think of the forum as being like a Parliament Session (but without the childishness!). You would expect there to be debate and discussion over matters on the table, but you wouldn’t be expecting to teach politics there.
I would definitely like to make that one more straightforward too. Whenever you are ready, if you can summarize what you have learned and what changes could help other learners, please post here, or edit the wiki directly if you feel comfortable with that.
In general, I can just emphasize that anything inside an <img> tag other than a working quoted URL, or a width parameter (or other valid parameter) with its value in quotes, will probably keep the tag from working right. HTML in general chokes on unrecognized information inside tags.
To test whether a URL is valid, just plug it into the address box of a browser tab, and see if it brings up the expected page or image.
I’ll also mention that draft forum posts are a good way to test html before posting it. If you don’t already see a preview pane to the right as you are typing a forum post, use the show preview >> button at bottom of the text box. Any html code that you include in your draft will show in the preview pane as it would display when finished. If it’s not displaying what you expect, you can tinker with it until it does. Then just cancel the post instead of saving it (unless you actually intended to post it).
True for most forum categories, but teaching is kind of the point of the tutorial category. (And to some extent the General category, where a lot of questions get asked and answered.) And the more resources the better, so the w3schools link was definitely a great addition!
But does that experiment indicate whether the code would be successful in iNat, or to produce the same result in iNat, and in a specific part of iNat? I gather from posts here that observation comments, descriptions, and posts may have different code requirements?
Is the situation different with addresses for images in iNat observations?
eg
This works <img src="https://static.inaturalist.org/photos/50495409/large.jpeg?"width="500px">
but this does not: <img src="/photos/50495409/large.jpeg?"width="500px">
(I am doing all my testing in Draft posts in an iNat Journal, as that is where my code needs to work)
EDIT: To clarify, the last version does not work with or without question mark after jpeg and./or a space before “width”. The first version works with or without either question mark or space before width. ie, these all work:
Anyway, that working link one or all of the working links could be added to the wiki.
Also, to clarify, am I correct that the info needed here is specific to iNat and so is unlikely to be learned by studying external resources?
Thanks jdmore. I have posted my findings above, though of course I don’t know how they will apply to different image locations or uses.
I think someone more experienced than me should authenticate it and choose a version, and decide whether it is general enough to be useful in the wiki, bearing in mind that learners invest a lot of time in trialling tips before being able to ascertain whether their use of the tip is correct, and whether the tip quoted is applicable to their situation/current use.
@kaipatiki_naturewatc Thanks for all of your helpful feedback. I did some editing of the wiki based on that, including a major clarification (I hope) of when relative URL links should and should not be used in HTML for iNaturalist. It seems like that was a major source of the problems you were having.
Otherwise, with that clarification, I think the tutorial section on Images still works as-is. But definitely let us know if something could still be improved.
It is interesting to know that the extra question marks in the photo URLs, and the missing space before the width parameter, were not affecting functioning of the code. However I would still recommend including the space, and omitting any extraneous parts of the URL, just in case some browsers are more picky than others about how they interpret and display HTML. “Keep it tidy” is a good rule of thumb in any code.
If you are sticking to the basic tags covered in this tutorial, they should all work the same way in any of those locations.
The main thing that is specific to iNat is how and when relative addresses work for URLs, as noted above and in the new wiki edit. Otherwise, the same basic code should work pretty much anywhere.
@bouteloua
Tried an everything went fine except that when I browse from the mobile app looks like the comment is clipped because the interface does not calculate the image height and does not allow scrolling down to view
Example here https://www.inaturalist.org/observations/37163683
Not sure if this hade been noticed and flagged.