Skip to content

Instantly share code, notes, and snippets.

@amandabee

amandabee/Images.html

Last active August 29, 2015 14:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amandabee/7002f106beadd8db1485 to your computer and use it in GitHub Desktop.
Save amandabee/7002f106beadd8db1485 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
captions.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Column Template</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
.caption {
line-height: 1.15;
font-size: 12px;
padding-top: 6px;
}
.pull-right {margin-left: 10px;}
.pull-left {margin-right: 10px;}
/*]]>*/
</style>
</head>
<body>
<div class="container">
<h1>Captions, and How to Style Them</h1>
<div class="panel panel-default pull-right col-sm-4 col-md-4">
<div class="panel-body">
<img src="bear.png" class="img-responsive" alt="a photograph of my dog" title="So cute, you'd never know he was feral." />
<p class="caption">Take a look at the <a href="http://getbootstrap.com/components/#panels">.panel</a> class to offset images or charts.</p>
</div>
</div>
<p class="lead">You have to put captions on your photos, maps and charts, but we haven't really talked much about how to go about doing that.</p>
<p>You have actually got a ton of ways that you might think about adding captions and citations to your graphics.</p>
<p>Keep in mind that a really good caption directs the reader's eyes without telling us what we already know. Yes, that is a photograph of the president in the Oval Office. Fabulous. Thank you for sharing.</p>
<p>Not everyone likes my particular model of photo captioning, but as long as you're in my class, you'll caption my way. Here's one <a href="http://www.denverpost.com/ci_18988018">random Denver Post</a> caption:</p>
<div class="panel panel-default pull-left col-sm-4 col-md-3">
<div class="panel-heading">
<h3 class="panel-title">Some Need Headlines</h3>
<p>This one doesn't. But he is cute. You get the idea.</p>
</div>
<div class="panel-body"><img src="bear.png" class="img-responsive" alt="a photograph of my dog" title="So cute, you'd never know he was feral." /></div>
</div>
<blockquote>
US President Barack Obama greets well-wishers September 27, 2011 upon arrival at Buckley Air Force Base in Aurora, Colorado. Obama was heading to Abraham Lincoln High School to speak on his proposed American Jobs Act. AFP PHOTO/Mandel NGAN (AFP | MANDEL NGAN)
</blockquote>Things the caption doesn't say? That it is a photograph. That he's shaking hands. It does tell us a little bit more about why the President was in town. And it tells us who took the picture.
<p>Another simple caption from <a href="http://nypost.com/2015/03/09/wrong-way-driver-in-crash-that-killed-cop-charged-with-manslaughter/">the Post</a> still tells us what we're seeing: <q>The vehicle driven by Efren Moreno who killed an off-duty NYPD detective in a wrong-way crash.</q></p>
<div class="pull-right col-sm-4 col-md-2 well well-sm">
<img src="bear.png" class="img-responsive" alt="a photograph of my dog" title="So cute, you'd never know he was feral." />
<p class="caption">The <a href="http://getbootstrap.com/components/#wells">.wells</a> class is another one worth reviewing.</p>
</div><!--/pull-right -->
<p>Don't tell me that the map above shows where players on the soccer team live. Tell me what you see in this map: most of the team can walk to school. And that makes a big difference when you're trying to get to pre-dawn workouts.</p>
<p>Don't tell me "This photograph shows Preston Liao holding a photo of his little sister." Tell me that Preston Liao's baby sister Allison was just three years old when she was killed by a driver who should have yielded. She was walking in the crosswalk with her grandmother when she was hit. Neighbors want the DOT to do more to slow drivers down on Flushing's Main street."</p>
<p>Bootstrap doesn't actually give us great style's for captioning images, so I went ahead and defined a <code>caption</code> class. You can see it in action by viewing the source of this page, but it looks about like this:</p>
<pre>
.caption {
line-height: 1.15;
font-size: 12px;
padding-top: 6px;
}
</pre>
<p>I used the element inspector to see the default line height and font size, and then tweaked it a bit. I actually added a couple more styles because I don't love the way that Bootstrap handles <code>.pull-right</code> and <code>.pull-left</code></p>
<pre>
.pull-right {margin-left: 10px;}
.pull-left {margin-right: 10px;}
</pre>
<p>There is a lot more that we could do with Bootstrap, but I'm trying to keep us focused on the bare minimum that will make our projects look good. That's all we want -- basic layout control.</p>
</div><!-- /container -->
</body>
</html>
Raw
columns.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML Examples: Simple Columns</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="lady.gif" class="pull-left"/>
<h1 style="color:#ffd200;">4.1 Million</h1>
<p>Lorem ipsome To learn more about HTML Tidy see http://tidy.sourceforge.net Please fill bug reports and queries using the "tracker" on the Tidy web site.</p>
</div><!-- /col -->
<div class="col-sm-4">
<img src="face.gif" class="pull-left"/>
<h1 style="color:#c73831;">6.9%</h1>
<p>Lorem ipsome To learn more about HTML Tidy see http://tidy.sourceforge.net Please fill bug reports and queries using the "tracker" on the Tidy web site.</p>
</div><!-- /col -->
<div class="col-sm-4">
<img src="up.gif" class="pull-left"/>
<h1 style="color:#2e6b7d;">17.7%</h1>
<p>Lorem ipsome To learn more about HTML Tidy see http://tidy.sourceforge.net Please fill bug reports and queries using the "tracker" on the Tidy web site.</p>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
</body>
</html>
Raw
Images.html
(Seeing images? to get anything out of this snippet you'll want to skip right down to <a href="http://bl.ocks.org/amandabee/7002f106beadd8db1485#Images.html">the code</a>.)
Imagur gives you this:
<a href="http://imgur.com/P6IDE9U"><img src="http://i.imgur.com/P6IDE9U.jpg" title="source: imgur.com" /></a>
1: take off the anchor <br />
<img src="http://i.imgur.com/P6IDE9U.jpg" title="source: imgur.com" />
2: give it a real title <br />
<img src="http://i.imgur.com/P6IDE9U.jpg" title="Clever Flag Graphic" />
3: add Bootstraps responsive image class <br />
<img src="http://i.imgur.com/P6IDE9U.jpg" title="Clever Flag Graphic" class="img-responsive" />
The "img-responsive" class is documented at <a href="http://getbootstrap.com/css/#images">http://getbootstrap.com/css/#images</a>.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML Examples</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<a href="Images.html">Cleaning up Imagur images</a><br />
<a href="SurveyForm.html">Embedding a Survey</a><br />
<a href="columns.html">Working with Bootstrap Columns</a><br />
<a href="captions.html">Adding Captions to Graphics</a><br />
</div><!-- /container -->
</body>
</html>
Raw
SurveyForm.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML Examples: Embedded Survey</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<iframe src="https://docs.google.com/forms/d/1e9uNW-4LpaS20B9vnKycgUpsVew_RqNKKOvo9PL7rcE/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div><!-- /container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment