SN bounty: display image when provided an image link \ stacker news ~meta

SN bounty: display image when provided an image link

17.3k sats \ 32 comments \ @k00b 17 Feb 2023 meta

Currently to show an image on SN you have to specify the correct markdown. It'd be nice to just display the image when provided an image link without requiring markdown.

e.g. when a stacker puts this image link in a comment or discussion post

https://imgproxy.snort.social/h_yDski4D7T74dzC6fwcBqwBoMOw3og33BmkNewTMjA/rs:fit:586:586/dpr:2/aHR0cHM6Ly9tZWRpYS50ZW5vci5jb20vVzY0SVhKQmZGcFlBQUFBQy9maXJpbmctZ3VuLWplbm5pZmVyLWNvb2xpZGdlLmdpZg

It renders this without requiring markdown

https://imgproxy.snort.social/h_yDski4D7T74dzC6fwcBqwBoMOw3og33BmkNewTMjA/rs:fit:586:586/dpr:2/aHR0cHM6Ly9tZWRpYS50ZW5vci5jb20vVzY0SVhKQmZGcFlBQUFBQy9maXJpbmctZ3VuLWplbm5pZmVyLWNvb2xpZGdlLmdpZg

I'll pay double the bounty if it's well implemented with minimal need for changes. I'll pay triple the bounty if you also make it work for link posts where the link is an image.

100,000 sats paid

k00b's bounties

view all past bounties

150k sats \ 3 replies \ @jowo 19 Feb 2023

Okey so I ended up working on both parts,

the regex check for urls containing an image suffix e.g. (.gif, .png)

and

regular urls as shown in the bounty description that requires an async request to check if the url is for an image.

Here's a 4 minute video demo:

https://www.loom.com/share/028b0dfd00da4aa49827d285c2320209

any feedback from stackers here would be appreciated, and of course from the guys at SN HQ. thanks

1 sat \ 2 replies \ @k00b OP 11 Mar 2023

Sorry for the delay. I still haven't reviewed the code but that's my fault - not yours.

10 sats \ 1 reply \ @k00b OP 26 Apr 2023

Sent you another 50k sats as recommended by @ekzyis after his review.

353 sats \ 0 replies \ @jowo 19 Jun 2023

much appreciated 👍 i keep an eye on github so any changes needed just fire me an @ on there and I'll dee what i can do

874 sats \ 1 reply \ @uco 17 Feb 2023

Just pledged sats to this post to help with the bounty.

This will be a great improvement to the UI for SN!

0 sats \ 0 replies \ @kr 17 Feb 2023

thank you sir 🤠

325 sats \ 12 replies \ @jowo 18 Feb 2023 freebie

I'd like to work on this Bounty, but I don't want to do so if I'm duplicating someone else's work. How do I know if anyone has claimed this?

208 sats \ 4 replies \ @uco 19 Feb 2023

This is valid concern. Bounties might need to have an additional status to avoid multiple people working on the same bounty. Might suggest:

Open: active bounty waiting for a user to claim
Claimed: user informs @k00b that he will complete bounty in X days. If not completed in timeframe then status reverts back to Open.
Paid

50 sats \ 3 replies \ @k00b OP 19 Feb 2023

I agree it's a problem, but that solution creates the problem giving anyone the right to prevent everyone else from working on a bounty without any cost to them or test of credibility.

A middle of the road approach might allow people to signal that they're working on a bounty in a special kind of comment and comment section, and anyone else who might work on the bounty can fully gauge the risk of also working on it.

192 sats \ 2 replies \ @uco 19 Feb 2023

I like the transparency of seeing who else might be working on a bounty.

Just brainstorming:

Maybe a user pledges Sats to Claim the right to work on bounty. Highest bidder is awarded the status of Claimed. Once completed they receive bounty plus sats pledged.

If they don’t complete the bounty they lose sats and Claim goes to second highest bid.

Users would bid high on bounties they are confident that match skills and can complete.

30 sats \ 1 reply \ @k00b OP 19 Feb 2023

That probably ideal game theoretically. It's putting up a bond.

It does introduce new problems: complicated UX and makes having sats a prereq. I'm not sure SN's bounty economy is ready for that, but it's probably the terminal state of a healthy bounty economy.

11 sats \ 0 replies \ @deleted231216 20 Feb 2023

"Pledging sats" would mean you would need to already have money in order to earn money... (And it is difficult to find work for Bitcoin recently.)

For what it's worth, if I see that someone else has started to work on the bounty, I cancel my attempt.

0 sats \ 6 replies \ @k00b OP 18 Feb 2023

If someone else has implemented it and I've accepted it, this bounty on SN will show as paid.

If someone has implemented it, they'll likely have submitted a PR.

0 sats \ 5 replies \ @jowo 18 Feb 2023

ok, well I'll give it a go and hope nobody else is hacking away at it, otherwise my time will be wasted. still, will be a good to learn a bit about the SN codebase

178 sats \ 2 replies \ @ek 18 Feb 2023

I didn't start working on this to give new contributors a chance :) (I have been contributing to the SN codebase for some time now and I also claimed the previous bounty.)

Looking at the comments and Github, I think no one else has picked this up so I think you have good chances to get the bounty.

I am also glad to see someone picking this up!

15 sats \ 0 replies \ @jowo 19 Feb 2023

Created a new Github issue for collating any feedback: https://github.com/stackernews/stacker.news/issues/239

0 sats \ 0 replies \ @jowo 18 Feb 2023

thanks for the comment, spent some time tidying up and ended up also implementing the async lookup for when regex won't work.

i'll do a write-up in the morning and share it to get some feedback. once I started digging into this feature I found lots of little edge cases and considered several ways of implementing it, so i'll be curious what you think of the code

0 sats \ 1 reply \ @k00b OP 18 Feb 2023

There will be more bounties and if someone beats you to it yet your work is solid, I'll give you a partial bounty for the effort.

0 sats \ 0 replies \ @jowo 18 Feb 2023

I've got the first slice of this feature coded up, just needs a bit of tidying.

I figured that it'd makes sense to break the work down into two parts:

Done: synchronously regex check and format urls that have a recognisable image url format
TBD: asynchronously check urls and format them as images if the mimetype returned is an image

i'll open up a pull request to get some initial feedback and if you'd prefer not to merge until both parts are completes, that's your prerogative

182 sats \ 2 replies \ @glow 17 Feb 2023

What if, for some reason, you just want to display the url of an image?

0 sats \ 1 reply \ @k00b OP 17 Feb 2023

When would you want to do that?

10 sats \ 0 replies \ @glow 17 Feb 2023

I'm not sure. If you want to let user decide if they want to load the image or not (dirty image, large file size...)

156 sats \ 0 replies \ @TheBTCManual 18 Feb 2023

When this goes live, consider the door open to the meme avalanche, it will not be stopped

121 sats \ 1 reply \ @siggy47 17 Feb 2023

Nice sample photo choice

0 sats \ 0 replies \ @k00b OP 17 Feb 2023

It's my current profile background on nostr: https://snort.social/p/npub1qkfnmpuz692azr8c5phn0930x2v92xyqvwgr6ve8znaa3qd6c3hq09ertp

Big Coolidge fan recently

10 sats \ 1 reply \ @deleted231216 18 Feb 2023

A regex could provide a simple solution:

var img_regex = /(https?:\/\/([a-z0-9\/\._-])+\.(?:jpe?g|gif|png))/gi;
var post_content = post_content.replace(img_regex, '<img src="$1">');

But this doesn't check if it is a valid image. Also would need to apply ZoomableImage.

0 sats \ 0 replies \ @k00b OP 18 Feb 2023

Regex fails on the image I provided in the bounty. Extensions are hints and conventions but are often not present.

10 sats \ 0 replies \ @lunanto 18 Feb 2023

This will make image posting easier. When I post an image after putting markdown, I use the preview feature to see if the image is reflecting. When this bounty is integrated, some steps will be eliminated whenever I make an image post.

1 sat \ 2 replies \ @monk_cactus 17 Feb 2023

We'll still be able to use markdown right?

https://img.memegenerator.net/images/73394682.jpg

2 sats \ 1 reply \ @TheBTCManual 18 Feb 2023

Lol mark downs days are numbered, I got shouted at for using it on Nostr apparently its the devils magic