Hello! Is there a way to create html to embed a single observation on a personal web page?
On the bottom of a normal observation, there are small squares that have a photo and common/Latin names that link to other observations. I’d like to be able to figure out how to make something similar.
Specifically, I’ve been creating a website from html to showcase the species I find in my yard which is a Certified Wildlife Habitat. I’d like to create some pages with a grid of these observations and have each individual observation update when someone helps narrow down tricky ID’s. The part I’m getting hung up on is figuring out how to make the individual squares.
it probably wouldn’t be too hard to adapt the code to add the common and scientific names underneath. you could probably also use flexbox divs to automatically space / wrap things instead of setting it explicitly.
back in the day, i had thought of creating something to display a single observation, similar to an embeddable tweet preview, but i never did it, since i never settled on a layout that i liked. but it wouldn’t be too hard to code it, given a good layout.
That grid you made looks great! It’s a bit beyond my skill level but nice work. Does your grid automatically populate or are you able to control the observations & order displayed? I looked at the code quickly but I’ll go back later and really try to understand it.
For the website I’m trying to make, I’d like to include a grid for idk let’s say insects seen in my yard and then display the photo, names & link back to iNat. The reason I’d like to include names is in case I can’t ID something like a beetle and somebody comes along later and marks it as a specific genus or species. If it could update the name automatically it would save me a lot of time typing html. BTW, I’m not very up to date on modern html as I learned it 20 years ago but sometimes I can figure it out.
both examples i provided above get data from iNaturalist via the API. you tell the API what to give you by passing it a set of parameters along with your request. the API more or less returns real-time data, though sometimes there’s a bit of a lag in getting the latest updates for various technical reasons.
