I really like the sound of this!!

I still think this would be a good idea and maybe a nice initial project for a new intern? Would have to figure out how this fits into everything wrt priorities but I do think it will help us increase visibility and maybe even virality...

100% agree, I'm really into this one :)

We'd want to start out by doing some design research about how other sites do this (and note: I'm not talking about that like giant share bar that everyone ignores) and then creating some mocks... before moving towards implementation.

@lstrobel how do you feel about taking up this project?

@misaugstad @jonfroehlich
I think this idea is really interesting, I would definitely be interested in taking it up!

OK, great @lstrobel. We can chat more during the Hackathon tomorrow if you're coming?

@jonfroehlich

Based off of my research, I've come up with two general design directions that I'd like to iterate on for the social media buttons.

The first idea is to have a smaller media share button that opens up a larger context menu. Ex:

- would open up:

This mirrors a design that I found on many sites that have users share images of sorts. For example, Flickr has such a menu:

Or for the Maps GSV integration:

The other design possibility is to have static social media logos somewhere on the page. This trades off time for space: it would crowd the page more but the user wouldn't have to click through menus to share content.

You can find buttons like this on almost any website.

At this point, I'd love feedback on what people think of these two routes. Or is there possibly a route that I'm missing?

Here's a mock showing the proposed share button and pop-up on Sidewalk Gallery. I think we need to do some user research to find out what platforms people are actually sharing to. Maybe we just start with Copy Link, Twitter, and Facebook. Also if we're happy with this as an approach, I can mock up what it would look like on other pages.

I also wonder if this can/should work with Issue #340? Should sharing coordinates be an option in this share menu?

I like this! Nice job @isavin12!

A few things:

• Agree that we should start small with just FB, Twitter, Email, and Copy Link support
• Should (could?) the 'Share' pop-up be right above the 'share' button to improve coherence and reduce mouse travel? Something like this (need to add the gray 'x' close in upper-right):
  
• I've also not been particularly happy with the tag and image date info placement. I think we can keep them below the image as they are now but this will likely be something we need to change as we add in more metadata and info to the expanded card (e.g., location info, map?)

I also really like the design @isavin12 !

The first thing that comes to mind for me is that this issue is actually two part, because as of now we don't have any specific link for each point on the map. Furthermore, when someone clicks on the link through whatever media they may be sharing it what do they see?
A couple of my ideas:

1. An image with the tag included in it.
2. A gallery expanded version tile with that specific position
3. The "explore" interface that we already have in sidewalk core, but drop them in that specific position.

Should (could?) the 'Share' pop-up be right above the 'share' button to improve coherence and reduce mouse travel? Something like this (need to add the gray 'x' close in upper-right)

@jonfroehlich it's definitely possible, i'm slightly torn between if it's a good idea or not because although it does limit mouse movement most other share buttons that I remember have the popup in the middle so i'm not really sure.

I can start on a purely design aspect for now or if we decide to do something with more specific links (that somehow include lat/long or any other position data we have) I can start thinking about how to implement that.

@rpechuk can you also start to look up how those little previews work when sharing links? It would be helpful to know how they are created so that we know what is even possible when designing what should go there.

@misaugstad not quite sure as to what you mean. I'm guessing you mean how exactly they are able to get to facebook, twitter, etc. If you mean something else let me know.

Sorry, I mean what is the little preview that someone sees when a link is shared with them. You see a little image of the website that you would go to if you clicked the link. And I have no idea how those things work right now :)

When sharing the current preview title and description are:
Project Sidewalk
Help us make sidewalks more accessible, for everyone.

respectively. As of now I don't have the labels themselves included in the preview picture as that should be another issue, which I can open or I can leave it to you. I was thinking in order to make each preview more specific to what you are sharing we can include the type of label and/or some info on the accessibility issue in the title/description and I was wondering if you guys had any ideas about what should be done. @jonfroehlich @isavin12 @misaugstad

Thanks Ron!

When sharing the current preview title and description are:
Project Sidewalk
Help us make sidewalks more accessible, for everyone.

Is this a question? Are you asking whether this is what we want for the title and description? If so, no. I don't think so. I think it would be more like "Look what I found with Project Sidewalk, a accessibility problem" or something hook'y like that.

Re: preview visuals. Without a mock or screenshots. Hard to get a sense of what you're envisioning. I think it should be overall quite minimal with the focus on the picture and the problem (and the label needs to be there to bring focus to the problem). Does that make sense?

Yup that makes sense, I'll start looking into it and post updates along the way. I'm headed out for the rest of the day, but will start tomorrow morning.

@Luciozzz note that the list of tags can be long and flow into that area. but that works well with the idea of decreasing the size of the button :)

@rpechuk the "copy link" feature should be really easy, right? I thought that that was part of the original mocks for this!

Then I'd say we dedicate the space below the map for data only. I tried putting the share button next to the title. I feel like this arrangement/info hierarchy is more intuitive:
https://user-images.githubusercontent.com/18668038/136475345-092ca55d-d23b-4d8a-8ae5-fb4b332f6303.mp4

Let me know what y'all think!

I still think bottom right corner is the right place.

It feels out of place to be next to the title.

I feel like the solution might be to make the bottom bar three columns instead of two and the tags (Etiquitas in Spanish) section more narrow.

So something like this (though forgive the gray-colored share button):

This is also closer to @isavin12's original mock, which I find quite clean!

@Luciozzz any follow-up thoughts on this?

@rpechuk, would you be able to make these changes relatively quickly once we hear back from @Luciozzz?

@jonfroehlich Ilia @isavin12 and I talked this morning, and we are thinking of adapting to a new design for the entire gallery. Mockups will come soon (this week). If we can adapt to a cleaner design we might have more screen real estate, and we can try to rearrange buttons and CTAs.

But for now, I think this looks good to me:

Thanks.

Note that we are generally very happy with the gallery design... do you mean redesigning this expanded view?

We were talking about branding and planned to come up with some branding ideas throughout the week. I think the current gallery design is pretty good, but if in the future we can have our design system we can update the gallery visually but keep the original functionality.

Yes, just bear in mind that our dev/engineering cycles are extremely limited so we should focus on the aforementioned three major areas we emailed about. I'm happy with Sidewalk Gallery. :) (Other than the current opens, of course) We have much greater areas of need to focus on for larger design tasks.

@jonfroehlich should have time to work on thursday so hopefully yes.

Great!

Hi @rpechuk, just a friendly checkin on this. How are things coming?

@rpechuk can you remind us where you're at on this? It would be nice to roll out even a limited version of it.

I just wanted to jump in with the most recent findings. Because of the way the image is passed to the share card (using meta tags and a URL) and the fact that google street view API doesn't allow any bot scraping (robots.txt file) we are not able to pass in the placeholder still image without hosting it somewhere. @jonfroehlich @misaugstad any ideas?

See: https://developers.facebook.com/docs/sharing/webmasters/images

@jonfroehlich Ron suggested that we could temporarily host the images/crops somewhere as a way to achieve this. Does that sounds like something that's worth doing? I don't imagine that we'd want to host all of these crops indefinitely... So is it worth it if the image links end up breaking in the future? Or should we just stick with something like a Project Sidewalk logo for the image when sharing a link to Project Sidewalk?

I think the whole idea is sharing the actual image (that's both the fun of sharing and also what builds engagement).

So, could we host them (indefinitely) on the individual server VM per city?

One way we could do that is through an Amazon S3 bucket which shouldn't be too difficult (or expensive) to set up.

Here is a tutorial which explains how to programmatically upload images to an S3 bucket: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-node-examples.html

For pricing: https://aws.amazon.com/s3/pricing/

Note using S3 would also be nice because if we chose to only store the image temporarily there is an easy way to set up automatic deletion: https://lepczynski.it/en/aws_en/automatically-delete-old-files-from-aws-s3/

That makes sense, there are many ways that we could do that:

One option would be to make a standalone web server either inside the current docker container or on the server hardware using either apache (https://hub.docker.com/_/httpd) or one of many other minimal standalone webservers https://gist.github.com/willurd/5720255 (although apache has the most amount of documentation and is fast at serving content).

Another option would be to keep the images on the current web server and put them into the assets folder where we could continually access them.

Agreed! @misaugstad any other thoughts or should I get started with that?

Nope, let's go for it! The only thing I can think of off the top of my head is to make sure that the images persist if we recreate the Docker container.

Found this in my idea log and felt that it related to this: