Add screenshots and video to about page. props markjaquith. fixes #24832. for trunk.

git-svn-id: http://core.svn.wordpress.org/trunk@24926 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/about.php

@@ -37,7 +37,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 	<h3><?php _e( 'Colorful New Theme' ); ?></h3>
 
 	<div class="feature-section images-stagger-right">
-		<img alt="" src="<?php echo esc_url( admin_url( 'images/screenshots/about-twenty-twelve.png' ) ); ?>" class="image-66" />
+		<img alt="" src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.6/theme.png" class="image-66" />
 		<h4><?php _e( 'Introducing Twenty Thirteen' ); ?></h4>
 		<p><?php printf( __( "The new default theme puts focus on your content with a colorful, single-column design made for media-rich blogging." ) ); ?></p>
 		<p><?php _e( 'Inspired by modern art, Twenty Thirteen features quirky details, beautiful typography, and bold, high-contrast colors &mdash; all with a flexible layout that looks great on any device, big or small.' ); ?></p>
@@ -48,7 +48,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 	<h3><?php _e( 'Write with Confidence' ); ?></h3>
 
 	<div class="feature-section images-stagger-right">
-		<img alt="" src="<?php echo esc_url( admin_url( 'images/screenshots/about-retina.png' ) ); ?>" class="image-66" />
+		<img alt="" src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.6/revisions.png" class="image-66" />
 		<h4><?php _e( 'Explore Revisions' ); ?></h4>
 		<p></p>
 		<p><?php _e( 'From the first word you write, WordPress saves every change. Each revision is always at your fingertips. Text is highlighted as you scroll through revisions at lightning speed, so you can see what changes have been made along the way.' ); ?></p>
@@ -75,7 +75,14 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 	<h3><?php _e( 'Support for Audio and Video' ); ?></h3>
 
 	<div class="feature-section images-stagger-right">
-		<img alt="" src="<?php echo esc_url( admin_url( 'images/screenshots/about-color-picker.png' ) ); ?>" class="image-30" />
+		<div class="video image-66"><?php echo wp_video_shortcode(
+			array(
+				'm4v' => (is_ssl() ? 'https://' : 'http://s.' ) . 'wordpress.org/images/core/3.6/video.m4v',
+				'ogv' => (is_ssl() ? 'https://' : 'http://s.' ) . 'wordpress.org/images/core/3.6/video.ogv',
+				'width' => 625,
+				'height' => 360,
+			)
+		); ?></div>
 		<h4><?php _e( 'New Media Player' ); ?></h4>
 		<p><?php _e( 'Share your audio and video with the new built-in HTML5 media player. Upload files using the media manager and embed them in your posts.' ); ?></p>
 

wp-admin/css/wp-admin-rtl.css

@@ -1729,7 +1729,8 @@ h2 .nav-tab {
 	margin: 0 0 10px 0.7%;
 }
 
-.about-wrap .feature-section.images-stagger-right img {
+.about-wrap .feature-section.images-stagger-right img,
+.about-wrap .feature-section.images-stagger-right .video {
 	float: left;
 	margin: 0 2em 12px 5px;
 }
@@ -1746,16 +1747,22 @@ h2 .nav-tab {
 	margin-left: 10px;
 }
 
+@media only screen and (max-width: 900px) {
+	.about-wrap .feature-section.images-stagger-right .video.image-66 {
+		margin-right: 3px;
+	}
+}
+
 @media only screen and (max-width: 768px) {
-	.about-wrap .feature-section img.image-66 {
+	.about-wrap .feature-section .image-66 {
 		float: none;
 	}
 
-	.about-wrap .feature-section.images-stagger-right img.image-66 {
+	.about-wrap .feature-section.images-stagger-right .image-66 {
 		margin-right: 3px;
 	}
 
-	.about-wrap .feature-section.images-stagger-left img.image-66 {
+	.about-wrap .feature-section.images-stagger-left .image-66 {
 		margin-left: 3px;
 	}
 }

wp-admin/css/wp-admin.css

@@ -5871,7 +5871,8 @@ h2 .nav-tab {
 
 /* Changelog / Update screen */
 
-.about-wrap .feature-section img {
+.about-wrap .feature-section img,
+.about-wrap .feature-section .video {
 	border: none;
 	margin: 0 1.94% 10px 0;
 	-webkit-border-radius: 3px;
@@ -5888,7 +5889,8 @@ h2 .nav-tab {
 	margin-left: 0;
 }
 
-.about-wrap .feature-section.images-stagger-right img {
+.about-wrap .feature-section.images-stagger-right img,
+.about-wrap .feature-section.images-stagger-right .video {
 	float: right;
 	margin: 0 5px 12px 2em;
 }
@@ -5898,16 +5900,20 @@ h2 .nav-tab {
 	margin: 0 2em 12px 5px;
 }
 
-.about-wrap .feature-section img.image-100 {
+.about-wrap .feature-section .image-100 {
 	margin: 0 0 2em 0;
 	width: 100%;
 }
 
-.about-wrap .feature-section img.image-66 {
+.about-wrap .feature-section .image-66 {
 	width: 65%;
 }
 
-.about-wrap .feature-section img.image-50 {
+.about-wrap .feature-section .image-66.video {
+	max-width: 600px;
+}
+
+.about-wrap .feature-section .image-50 {
 	max-width: 50%;
 }
 
@@ -5975,23 +5981,34 @@ h2 .nav-tab {
 
 @media only screen and (max-width: 900px) {
 	.about-wrap .feature-section.images-stagger-left img,
-	.about-wrap .feature-section.images-stagger-right img {
+	.about-wrap .feature-section.images-stagger-right img,
+	.about-wrap .feature-section.images-stagger-right .video {
 		clear: both;
 	}
-}
 
-@media only screen and (max-width: 768px) {
+	.about-wrap .feature-section .video.image-66 {
-	.about-wrap .feature-section img.image-66 {
 		float: none;
 		width: 98%;
 		max-width: 98%;
 	}
 
-	.about-wrap .feature-section.images-stagger-right img.image-66 {
+	.about-wrap .feature-section.images-stagger-right .video.image-66 {
+		margin-left: 3px;
+	}
+}
+
+@media only screen and (max-width: 768px) {
+	.about-wrap .feature-section .image-66 {
+		float: none;
+		width: 98%;
+		max-width: 98%;
+	}
+
+	.about-wrap .feature-section.images-stagger-right .image-66 {
 		margin-left: 3px;
 	}
 
-	.about-wrap .feature-section.images-stagger-left img.image-66 {
+	.about-wrap .feature-section.images-stagger-left .image-66 {
 		margin-right: 3px;
 	}
 }