Higher quality images in embed widget

General
1

Greetings,

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;}
2

@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.

3

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.

1 Like
4

Thank you @tiwane

5

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?

6

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).

7

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