Resolves #456 by adding share button and endpoint to save share images

[rpechuk]

Resolves #456

Added a share button and popup to the Gallery modal and created an endpoint on the server to save images for sharing on server.

Before/After screenshots

Testing instructions

1. Go to gallery and click on share button
2. Chose location to share and click on specific button
3. Check if title and image and everything else matches what you think it should be
4. (optional) check public/assets/share-images to make sure image is saved
   Note: Needs to be on test server to properly check if image is being shown in preview.

[jonfroehlich]

This looks really excellent! I'll defer to @misaugstad to test.

Can we take out the Tumblr icon?

Do you have to be signed in to the social media service for this to work?

When you share out, do you get to see the exact "Sidewalk Gallery" page that you were viewing when you shared.

[rpechuk]

Can we take out the Tumblr icon?

Yup!

Do you have to be signed in to the social media service for this to work?

No if you aren't signed in it will bring you to sign in page then redirect to sharing as if you were signed in

When you share out, do you get to see the exact "Sidewalk Gallery" page that you were viewing when you shared.

If you are asking if when you click the link you get put on the same modal as the one that was shared then no, however, the picture that is being shared is specific to which modal you are clicked on to.

[jonfroehlich]

Thanks for the responses.

If you are asking if when you click the link you get put on the same modal as the one that was shared then no, however, the picture that is being shared is specific to which modal you are clicked on to.

As a user, if I see a preview link with a picture, when I click on that picture/link, I would expect to see what the sharerer originally saw (or intends for me to see). At the least, it should include the picture that you're sharing. At best (perhaps), it should be the exact Sidewalk Gallery view that the sharer was seeing when they clicked share.

Thoughts?

[misaugstad]

This is definitely the goal and original concept (see #2405).

However, we only have the ability to carry over the label type filter right now. See this comment on #2746.

We had originally been hoping that @sidlak-c137 could be working on this in parallel (he got the label type filter into the URL query string). But unfortunately he left for an internship for the summer. So someone else is going to have to pick that work up soon.

But we had decided that we didn't want to couple those features together since they are both a lot of work. Especially since @rpechuk is trying to wrap up in the next week or two 😁

@rpechuk could you do as much of this as can easily be done? Which would be to check if the user had filtered for a specific label type, and if so, include the label type in the URL query string?

[jonfroehlich]

Sure. I'm happy to split this out into separate tickets so that @rpechuk can have a final PR before he leaves (😢).

I think ultimately we may need to move toward a Sidewalk Gallery architecture that works more like Google Images, which has a unique custom url signature for everything, which can be shared (not sure if that signature encodes all of the filters, selections, etc. applied or if it actually stores a unique identifier that points to an archive of all relevant information to restore the exact same page).

So, when I share: https://www.google.com/search?q=Project+Sidewalk&tbm=isch&source=hp&biw=1200&bih=1819&ei=xvL_YtuLOtHQ9APV2JLACA&iflsig=AJiK0e8AAAAAYwAA1vzqpDkxsHqDZEEEKMcqrIEHM2gl&ved=0ahUKEwjbhvGx39P5AhVRKH0KHVWsBIgQ4dUDCAc&uact=5&oq=Project+Sidewalk&gs_lcp=CgNpbWcQAzIFCAAQgAQyBggAEB4QCDIECAAQGDIECAAQGDoICAAQgAQQsQM6CwgAEIAEELEDEIMBOgYIABAeEAVQAFjOE2DuFGgCcAB4AIABKIgB_gSSAQIxOJgBAKABAaoBC2d3cy13aXotaW1n&sclient=img

I know that you'll see:

Or if I click on an image and share it, I know you'll see:
https://www.google.com/search?q=Project+Sidewalk&tbm=isch&source=hp&biw=1200&bih=1819&ei=xvL_YtuLOtHQ9APV2JLACA&iflsig=AJiK0e8AAAAAYwAA1vzqpDkxsHqDZEEEKMcqrIEHM2gl&ved=0ahUKEwjbhvGx39P5AhVRKH0KHVWsBIgQ4dUDCAc&uact=5&oq=Project+Sidewalk&gs_lcp=CgNpbWcQAzIFCAAQgAQyBggAEB4QCDIECAAQGDIECAAQGDoICAAQgAQQsQM6CwgAEIAEELEDEIMBOgYIABAeEAVQAFjOE2DuFGgCcAB4AIABKIgB_gSSAQIxOJgBAKABAaoBC2d3cy13aXotaW1n&sclient=img#imgrc=KlxJ2B8_qO3VVM

[misaugstad]

I know that @jonfroehlich already listed a couple changes to make, but I wanted to give a quick test to add anything else I can right now.

1. When the share popup is open, clicking on 'Share' again should close the popup, just like it does if you click anywhere else on the page
2. You need to add the directory that the images are put in to the repo. You only want to .gitignore the files inside the folder, otherwise we get an IO exception for trying to write to a directory that doesn't exist
3. Since we are now saving the images ourselves instead of just using the URL from Google, would it be possible to edit the image to put the label on it?
4. Are the twitter and facebook meta tag things that were added back into main.scala.html necessary? If so, can you update that code appropriately? I can't imagine that we want to be trying to querying UMD servers there
5. There are a few places where you've added new code that should be commented. Mostly in gallery.scala.html
6. In fact, can you move that JavaScript that you've added to gallery.scala.html into a normal JavaScript file? I don't see any reason why it needs to be inline in the HTML. It probably requires making a new file in either src/modal or src/displays.

[jonfroehlich]

Upon further reflection, I'm not so sure this feature makes any sense if, when you share a url with a preview, once you click on that URL, you don't actually see the same thing as the sharer.

I thought the original idea was to find something interesting, share it out on social media, and have people view that thing in Project Sidewalk...

[misaugstad]

I thought the original idea was to find something interesting, share it out on social media, and have people view that thing in Project Sidewalk...

100%. And that's still the goal, this was just a step in that direction to reduce the scope a bit. Do you think that we just shouldn't merge it at all if we don't have the full thing ready?

On that front, @rpechuk if you're able to provide the URL yourself (as opposed to it just taking the URL in the address bar) by including the label_id as a query parameter, then I could augment this before merging so that the first label that shows up when they load the page is the label that was shared.

The implementation would be a bit janky, and we'd probably want to figure out a better solution for later, but I think I could make it work for now!

[jonfroehlich]

I like that proposal @misaugstad. Sounds good!