Skip to content

Instantly share code, notes, and snippets.

@loganwilliams
Last active September 5, 2022 05:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save loganwilliams/a79bb4b49e388e5cd4e5f2523901fcd0 to your computer and use it in GitHub Desktop.
Save loganwilliams/a79bb4b49e388e5cd4e5f2523901fcd0 to your computer and use it in GitHub Desktop.
iNaturalist hugo shortcode
.inaturalist {
border: 1px solid #999;
padding: 0.5em;
margin: 0.5em;
border-radius: 2px;
}
.inaturalist img {
max-width: 100% !important;
margin-left: auto !important;
}
.inaturalist img:hover {
cursor: zoom-in;
}
.title {
font-size: 18px;
color: black;
font-weight: bold;
display: flex;
justify-content: space-between;
}
.title span {
font-style: italic;
color: gray;
}
.inaturalist a {
color: black !important;
text-decoration: none !important;
}
.inaturalist .location {
color: gray !important;
font-style: italic;
}
.inaturalist .ids {
color: gray !important;
}
.details {
font-size: 13px;
display: flex;
justify-content: space-between;
}
.details:hover {
background-color: #eee;
cursor: pointer;
}
.right {
text-align: right;
}
.date {
font-weight: bold;
}
{{ $id := index (last 1 (split (.Get 0) "/" )) 0 }}
{{ $url := printf "https://api.inaturalist.org/v1/observations/%s" $id }}
{{ $data := getJSON $url }}
{{ $result := index $data.results 0}}
{{ $taxon := $result.taxon }}
<div class="inaturalist">
<div class="title">
<div class="left">
{{ $taxon.preferred_common_name }} <span>({{ $taxon.name }})</span>
</div>
<div class="right">
{{ if (eq $result.quality_grade "research") }}
{{ end }}
</div>
</div>
<a href="{{ replace (index $result.observation_photos 0).photo.url "square" "original" }}">
<img src="{{ replace (index $result.observation_photos 0).photo.url "square" "large" }}" />
</a>
<a href="{{ $result.uri }}">
<div class="details">
<div class="left">
<div class="date">{{ $result.observed_on_string }}</div>
<div class="location">
{{ $result.place_guess }}</span>
</div>
</div>
<div class="right">
<div class="iconic">{{ $taxon.iconic_taxon_name }}</div>
<div class="ids">{{ $result.identifications_count }} IDs</div>
</div>
</div>
</a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment