Higher quality images in embed widget


Is it possible to embed higher quality thumbnails with the embed widget? Increasing the size using the below styling will increase the size, but the images are too pixelated.

.inat-observation-image img, .inat-user-image img {min-width:150px;)

Thank you in advance. The entire widget code is pasted below.

.inat-widget { font-family: Georgia, serif; padding: 10px; line-height: 1;text-align:center;} .inat-widget-header {margin-bottom: 10px;} .inat-widget td {vertical-align: top; padding-bottom: 10px;} .inat-label { color: #888; } .inat-meta { font-size: smaller; margin-top: 3px; line-height: 1.2;} .inat-observation-body, .inat-user-body { padding-left: 10px;} .inat-observation-image {text-align: center;} .inat-observation-image img, .inat-user-image img { min-width:100px; max-width: 400px; border-radius: 50%; border: 1px solid #000000; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);} .inat-observation-image img { vertical-align: middle; } .inat-widget-small .inat-observation-image { margin: 0 5px 5px 0; height:100px;} .inat-label, .inat-value, .inat-user { font-family: "Trebuchet MS", Arial, sans-serif; } .inat-user-body {vertical-align: middle;} .inat-widget td.inat-user-body {vertical-align: middle;} .inat-widget .inat-footer td.inat-value {vertical-align: middle; padding-left: 10px;}
View more observations from the Western Redcedar Decline Map on iNaturalist »

@jmhulbert I moved this from Feature Requests to General because iNat staff are no longer supporting or developing the widget. However, members of the community can probably weigh in on this.

you can always use the API to make your own widget. in a another discussion from back in the day (https://forum.inaturalist.org/t/observations-widget-is-not-working-anymore/7892/10), i provided a basic example of such a widget.

in that discussion, @karoopixie asks how to use larger resolution images, and i explain how to do it but did not actually implement it in my example. just now, i went ahead and adapted my example so that it now will pull higher resolution images, if needed.

Thank you @tiwane

Hi @pisum,

Thanks for sharing the links and adapting the code to my needs, but it still leaves me craving a more accessible approach. Would you be willing to expand the metadata?

not sure what this means. i provided a link to the code that i wrote. you’re welcome to adapt it as you like (or use it as inspiration for writing your own thing).

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.