1018274 - Add images to resources pages

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Cassie McDaniel [:cassiemc]]

Need to create images, assets and point out where other rich media will fit into the Web Literacy resource pages.

Comment 1

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Cassie: what's the best process for this?
* Do you think it's a blocker for pushing to production? The pages are very text heavy as they stand.

* Kat volunteered to help source imagery
* I can review those images and embed codes and then submit them as pull requests for the pages. 

* Kat: we can continue using the original ehterpads to paste links to images, videos, etc.
* If you're still up for this, want to review those etherpads and paste in embed codes, visual assets, etc?
https://wiki.mozilla.org/Webmaker/Resources

Comment 2

[Cassie McDaniel [:cassiemc]]

No I don't think it's a blocker, but if people have bandwidth to take it on before we push to prod that would be awesome.

My advice would be to make sure images are crisp & in focus, high-res (so they can be full width, at least 1200px wide), and of course meaningful: make they are helping tell the story with interesting content, not just filler content. Most images will require a little bit of treatment in photoshop.

If you're able to do pull requests, excellent. We can discuss in Standups today making reviews of this content a priority.

Comment 3

[Kat Braybrooke [:codekat]]

I'm not privy to the standup you're speaking of, so I'm not sure where you guys got with this discussion, but I went in and added some sample photos to the Open Practices pad here: https://etherpad.mozilla.org/openpractices

Note all are CC licensed, and some ask for attribution. Some are not 1200px wide, but perhaps you could provide for variation on image sizes to loosen this requirement for yourselves a bit. 

Let me know if these are on the right track; if so I can move to adding photos to the other competencies.

Comment 4

[Matt Thompson (@OpenMatt :OpenMatt)]

* Recapping status: 

** 1) We're going to do a final copy QA review of what's on staging. Then ship the pages as is (without images) for [june13] release.

** 2) We'll work on adding images and media embeds for [june27] release

* Kat, those images are on the right track from my point of view. If you can keep going with that, we can work together on getting them implemented for next release

* Kat, if you can also include embed codes / iframes for potential videos / media / Popcorn, that'd be good too

Comment 5

[Cassie McDaniel [:cassiemc]]

Kat, I left some comments in the etherpad. This is such an awesome start and I'm happy to see it happening!

I am going to push for really high quality here though to make this resources section stand out from our competitors, so I think the high-res thing is actually really important, in making this content feel current and making Webmaker feel like its leading the web literacy charge. At least 1200px wide is preferred.

I think given the quality we are going for here, aiming for 1-3 pieces of imagery/media for each section is a good and lofty goal. So for Open Practices, I would use:

* the OER illustration of the books (if we can recreate it to make it higher res)
* embed the Ted talk
* the Creative Commons photo

They are all well-staged, crisp graphics that tell the story of the copy in a straightforward way.

Comment 6

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Kat: are you able to keep working on this?

Comment 7

[Kat Braybrooke [:codekat]]

Yes I can - requiring 1200px wide is a tall order though when we also want CC images. 

But will do my best to find at least 1 for each competency today. Will leave in the Etherpads, and ping here when finished.

Comment 8

[Kat Braybrooke [:codekat]]

Update: Gathering image/media suggestions here: https://etherpad.mozilla.org/webmakertextbookassets

And an observation: It's been very difficult to find 1200px or wider images that are CC for many of these competencies. For some, like Coding and Scripting, the only thing I can think to do is embed some of the videos. It would be great if we could have images of different sizes and compositions on the page, because it would give us more freedom to choose images that really fit this text.

Comment 9

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Kat: thanks for this. Let's flag for Cassie to review once she's back from PTO 

* In the mean time, let's take your suggestions to start with embedding the videos. Going to file that and work out best practice for that now.

Comment 10

[Cassie McDaniel [:cassiemc]]

I think the video work is a good place to start. I'd like to step in and help out with the images if that works for you guys (can reassign this bug to me...).

Comment 11

[Matt Thompson (@OpenMatt :OpenMatt)]

* k done. thanks Cassie. 

* Kat, you and I can focus on video and further updating / adding additional content

Comment 12

[Matt Thompson (@OpenMatt :OpenMatt)]

* Cassie: are you taking this forward? Let us know if there's any blockers Kat or I can clear for you here

Comment 13

[Cassie McDaniel [:cassiemc]]

Yes I'm on it.

Comment 14

[Kat Braybrooke [:codekat]]

Cheers Cassie, do you want us to help by reviewing or finding media, or did you want to go at it alone?

Comment 15

[Matt Thompson (@OpenMatt :OpenMatt)]

* Cassie: given scarce design resources, I'd like to ask that we:

1) take this off your plate
2) let Kat and I add these images ourselves, working with Aki to add them through JSON
3) flag you for design review prior to pushing

We can follow protocol, add the images to AWS, etc. 
I think making some small progress on this for Maker Party is worthwhile. 
And I know you won't have time for it this cycle. 

Can Kat and I push ahead on this, and flag you for design review as we go?

Comment 16

[Cassie McDaniel [:cassiemc]]

Ok, I appreciate your care on this. Look forward to seeing what you guys are able to do.

Comment 17

[Matt Thompson (@OpenMatt :OpenMatt)]

* Thank Cassie.
* Kat: do you have Amazon Web Services access? Can you connect with JP in IRC to get you set up so that you can add images to our server?

Comment 18

[Kat Braybrooke [:codekat]]

Yep I'm already set up Matt - let's do this thing

Comment 19

[Matt Thompson (@OpenMatt :OpenMatt)]

* @ Kat: sweet! what's the next step? and also: I forget where we landed with adding videos as well

* Why don't we start with one page, like Privacy, and test-drive adding videos and images on staging?

* Then we have a look at how it's working there before updating prod

* Kat: can you take that on?

Comment 20

[Kat Braybrooke [:codekat]]

Will try. Have syntax for videos, so can add them when I add other media types.

Given that we've figured out workflow for now, I'm resolving this - and will move tasks to a specific bug for each competency we add media to, starting with "Composing" since that's what I had already spent time looking for media on https://etherpad.mozilla.org/webmakertextbookassets