853146 - Add a caption with CTA to embedded media in the Devhub content page template

Status: RESOLVED FIXED

(Marketplace Graveyard :: Developer Pages, defect)

Description

[Tony Santos [:tsmuse]]

We need a caption area for our partner videos and any other embedded content that will allow us to credit the partner and provide a link to their site. 

Attached is a detail of the caption design, and an example of it in the page. 

The PSD file is at: https://www.dropbox.com/s/muduuhhjg57h4y9/mediaCaption.psd (warning: the details is larger than the real embed size)

Comment 1

[Tony Santos [:tsmuse]]

Attachment: Media Caption detail

Comment 2

[Tony Santos [:tsmuse]]

Attachment: New media caption embedded in a page

Comment 3

[Daniel Buchner [:dbuc]]

(In reply to Tony Santos [:tsmuse] from comment #0)
> We need a caption area for our partner videos and any other embedded content
> that will allow us to credit the partner and provide a link to their site. 
> 
> Attached is a detail of the caption design, and an example of it in the
> page. 
> 
> The PSD file is at:
> https://www.dropbox.com/s/muduuhhjg57h4y9/mediaCaption.psd (warning: the
> details is larger than the real embed size)

I like it - one question: there seems to be a lot of whitespace under the wording/button, is that needed/intended? Can we eliminate the unused space if that is the case?

Comment 4

[Tony Santos [:tsmuse]]

If you're looking at it in context of the text, there isn't much white-space between the rule at the bottom of the caption and the first line of the next paragraph. It's 19px from the bottom of the rule to the ascender line of the next line of text. If we remove much of the space it will feel wedged into the page instead of part of the flow. We need the space above the rule if the line of text has to expand to two lines with the button still centered on the text. (Never say never, these things always tend to get wordy.) White-space is your friend :)
 
In the caption detail image there is extra white-space around it because I needed space to work in while I was moving things around, and frankly it frames the image better when it's all by itself. Don't look at that image for the spacing of the element in the context of the page.

Comment 5

[Jen Fong-Adwent [:ednapiranha]]

Does anyone have that orange rocket logo as a png?

Comment 6

[Tony Santos [:tsmuse]]

Attachment: Rocket!!!

The rocket, larger than used in mocks so you can re-size as needed.

Comment 7

[Jen Fong-Adwent [:ednapiranha]]

Also, what would the Treehouse url be? Is it the same for all video captions?

Comment 8

[Daniel Buchner [:dbuc]]

This is the link to use: 
http://teamtreehouse.com/?cid=1154

Comment 9

[Jen Fong-Adwent [:ednapiranha]]

merged in https://github.com/mozilla/zamboni/commit/90988fb84779afa0bdd75903eb3a4844be20310b