[#1434] Added video section in Homepage

[lucascumsille]

Fixes: #1434
A specific of #791.

@garethrees
Before merging a couple of things:

• In this PR, I have added only three videos, but let me know if you want to add the rest of the list. My only concern is that some of the titles differ in length. The card layout takes that into account and makes all the cards have the same height, but of course, some of them will have more extra white space between the inner elements.
• Is the position alright? Right below the how it works section.

I thought this would be a better place because, in terms of info and content, we haven't reached the page section that has more content to read; therefore, I thought users would probably have the chance to see this content in comparison to leaving it at the end of the page.

• I left a comment of for the donation button here
• In terms of styling I thought of these two options, let me know which one you prefer. Personally I find the card layout easier to scan:

Option 1

Option 1 mobile version

In this one we could replace the link for a button styling instead, if you are not too keen on the links with icons.
What I like about them, without looking at the label they already telling you what they are.

Option 2

Let me know your thought and I'll fix the PR

[lucascumsille]

@garethrees One thing it would be good to have in mind. Do you want me to change the background colour of the video section, so it doesn't look like the "Recent Videos" section and the "Who can I request information from?" are from the same section. I couldn't find many examples on the current website to use, at the moment we have #f3f1eb and #ffffff, but these ones are above and below the video section so potentially I'll need to create a new background colour to make it differ from those sections.

[garethrees]

This looks great!

I have added only three videos

This is plenty.

My only concern is that some of the titles differ in length…

I think it looks great with the current videos and I'm not too concerned that we'll have titles that are wildly different in length.

In terms of styling I thought of these two options, let me know which one you prefer. Personally I find the card layout easier to scan

I agree, the card layout is lovely. Could we use YouTube embeds, though? Only having to add a new URL to the @research_videos data structure would be much easier, rather than having to copy/paste the titles and create a thumbnail image every time we want to add a video. Keeping the cost of change low is very valuable.

I left a comment of for the donation button here

I'd like the donation button CTA as described, since that's one of the main reasons for adding these sections. I agree we should still have a "browse more" link that goes to our channel, but as the secondary CTA. I'm happy with the phrasing as I wrote it in the issue for now; this isn't worth lots of people's time this minute. We can tune it later on.

Is the position alright? Right below the how it works section. I thought this would be a better place because, in terms of info and content, we haven't reached the page section that has more content to read; therefore, I thought users would probably have the chance to see this content in comparison to leaving it at the end of the page.

I'm not sure what you mean by "we haven't reached the page section that has more content to read", but as with the research papers, ideally we'd position this below the "Who can I request information from?" / "What information has been requested?" section. The reason for this is that the research papers and videos are more incidental content, whereas the Alaveteli-generated lists are more directly about what to do on the site.

I can see that we don't have a great way of doing that at this point, so I've made a pull request – which will hopefully be merged by the time you read this! – that makes it easier to do this and keep the overrides a little simpler.

Should be an easy change:

• Create lib/views/general/_frontpage_extra.html.erb
• Add <%= render :partial => "frontpage_videos" %> to that file

[lucascumsille]

I'm glad you like it @garethrees

I agree, the card layout is lovely. Could we use YouTube embeds, though? Only having to add a new URL to the @research_videos data structure would be much easier, rather than having to copy/paste the titles and create a thumbnail image every time we want to add a video. Keeping the cost of change low is very valuable.

This is how the embeds would look like with the provided space:

Without the YouTube API I don't think we can get the title.

Instead of using the embed we could use the "ID" of the video to pull the thumbnail and the link. But the title would be needed to be added manually. This way we could keep the same card aesthetic without using the API. For the image Alt I would use the title.
Example:
<% @research_videos = [ { title: 'Reforming Freedom of Information: mySociety policy paper launch event', id: 'AbXowwJDn3M'}, { title: 'The FOI Clearing House: an openDemocracy investigation into FOI at the heart of government', id: 'wXbhBHfeOzk',} { title: 'Workshop: What can you do with FOI?', id: 'meaLp7p2Yok'}, ] %>

In terms of the donation would this work for you? Basically gives more priority the donation action than the "Browse more", but if you want to make the "Browse more" more obvious I could make it a secondary button, but I don't think is that advisable if the main purpose is for people to donate.

[garethrees]

Instead of using the embed we could use the "ID" of the video to pull the thumbnail and the link. But the title would be needed to be added manually. This way we could keep the same card aesthetic without using the API. For the image Alt I would use the title.

This looks great – the less we have to do to add a video to the list the better.

In terms of the donation would this work for you?

Here's what I had in mind:

I think it's important to indicate why we're asking for donations. The reason is that it supports us do the interesting things that we're showing immediately above.

[lucascumsille]

@garethrees I just pushed three commits that:

• Leaves the donation button with this layout
  

• The ID now replaces the url and img. The title will also be the alt for the image.

• Create lib/views/general/_frontpage_extra.html.erb Add <%= render :partial => "frontpage_videos" %> to that file

Let me know if there is anything else you'd like me to do =)

[lucascumsille]

Thanks for the feedback @garethrees I have rebased and fixed the indention on this PR.
Let me know if there is anything else.

[garethrees]

I'm getting having doubts about including the donation value on the button so will mull that over, but aside from that this is ready to go. We'll roll out in conjunction with #1146 and https://github.com/mysociety/Design-Internal-tasks/issues/8#issuecomment-1410057767.

[garethrees]

@ajparsons just want to check the utm tracking here.

Currently this generates the following URL (split for ease of reading):

https://www.mysociety.org/donate?
  how-much=10&
  utm_campaign=wdtk-homepage-videos&
  utm_content=homepage+donate+10&
  utm_medium=link&
  utm_source=whatdotheyknow.com

I think I'll drop the £ value and change the button text to "Donate now", so that will end up as:

https://www.mysociety.org/donate?
  how-much=10&
  utm_campaign=wdtk-homepage-videos&
  utm_content=homepage+donate+now&
  utm_medium=link&
  utm_source=whatdotheyknow.com

Is this what you'd expect? Easy to change if there's a better combo.

[ajparsons]

Good on campaigns settings, if dropping "donate £10" drop the how-much because our suggested one-off donation is now higher than that. If keeping it, also add an 'how-often=one-off' parameter.

See https://github.com/mysociety/orgsites/pull/1321 for more info on that.

Can be used in combination for a double button like this (example from the blog)