I’m entranced by this photo of the Beatles. I first found it on Stevey.com, where several commenters apparently felt the same way. It’s rare to see the world’s finest band from this angle, and as a wannabe musician myself, I always love interesting gig photography. At any rate, I realized I would love to track down the original photograph and find a print that I could frame.

Fortunately, the commenters on another site made a concerted effort to date the performance, eventually even tracking down some Youtube clips of the performance, from Paris in June 1965. From there, someone else identified the photo as coming from Paris Match — he even had a scan of the original printing. However, it was a bit beaten up after forty-three years, and too low a resolution to be blown up much.

At that point, a quick search told me that Harvard’s libraries have Paris Match issues going back to the forties. I was worried they might just be microfilm, but in act was pleasantly surprised when a librarian helping me hoisted a heavy archive box onto the counter — they’ve got the actual issues. I tracked down the image in question (contra the earlier commenter’s recollection, it was actually from the first issue in July of that year), and scanned it several ways at 300dpi. The results, along with a quick scan of the rest of the article for posterity are here.

So that’s where I am right now. Obviously, the printed photograph isn’t the best — it was reduced to dot printing, and it’s marred by some typography that, er, didn’t age well. Seeing the original confirmed for me that the photographer was one Michel Le Tac. M. Le Tac is all but un-Googleable, so I think my next step is to contact the magazine directly… Perhaps, in the end, I’ll have call to learn something about French copyright law.

Update, 03/06/2009 I heard back from Paris Match. Unfortunately, it looks like they don’t license to particuliers. There’s always the chance that I’ve misunderstood something, as our entire email conversation was conducted through Babel Fish, but it looks like I’m out of luck as a private citizen. I’m still thinking, though…

if you’re using Hemingway — or one of its variants — then you might find that solution less than ideal.If you check out a single post page on a Hemingway-themed blog (say, this one), you’ll see that horizontal space is at a premium. This is by design, of course, since lines of about eighty characters are the most readable.

To crowd the main content column with an arbitrary pullquote, then, would impair legibility and hurt the neat geometry that I’ve got going on. Jamming pullquotes therein would be especially unconscionable when we consider all the wide-open whitespace we’ve got to the left, just waiting to be filled with beautiful typography. It is here, in fact, that we’ll be placing our pullquotes. My goal is to mimic the look of the info box that rides in the left column ("#secondary," for those of you who have familiarized yourselves with Hemingway’s CSS), but you can style your left-column pullquotes however you’d like using my model.

So, how does this work? Well, since you’ll be defining the content and vertical position of these pullquotes in the contents of the post itself, you can’t very well escape the #primary div (that’s the one that appears in the right column) to place your quote in #secondary directly. So to make do, we’ll have to cheat a little bit. Our pullquotes will remain logically embedded in #primary, but the browser will render them as if they were right there in the left column where we want them.

First up, the trick to doing so. Toward the top of your style.css file (located in ../wp-content/themes/hemingway/, by default), you should see a section of style code that matches the following:

.inside{
      width:80%;
      min-width:65em;
      max-width:85em;
      margin:0 auto;
}


If your stylesheet is commented like mine is, you’ll see a note about this class that it determines the width for the main content areas across the entire page. It’s powerful stuff, indeed, and it carries out this feat by containing all the other blocks inside it. This is the property of .inside that interests us. You’ll want to take modify this class as follows:

.inside{
      position: relative;
      width:80%;
      min-width:65em;
      max-width:85em;
      margin:0 auto;
}

This new line assigns the .inside class a position besides the default value ("static"). Why do we bother doing that? It’s not because we care particularly how the class itself is positioned (actually, the only reason I’m telling you to set it to "relative" is because the other option, "absolute," breaks the layout).  Instead, what we care about is using .inside as a reference. According to the CSS spec, an absolute-positioned block is takes an absolute position with regard to its containing block, and the containing block is any parent with a block-level, normal-flow position. In plain English, this little hack ensures that our pullquotes take their marching orders from the right source.

With that out of the way, you can style your pullquotes any way you’d like using the selector #primary .inside .pullquote. Just add it in somewhere in style.css For reference, here’s how I gussy mine up (as of this writing):

#primary .inside .pullquote {
     position: absolute;
     left: 0;
     width: 30%;
     padding: .5em 0;
     border-top: 1px solid #CCC;
     border-bottom: 1px solid #CCC;
     font-size: 1.8em;
}

For those who are still following my explanation above, you can see that the "position: absolute" tells the pullquote div to pay attention to where the .inside div is located, and "left: 0" tells it to sidle up zero pixels from .inside’s left wall — in other words, right there in the left column. Meanwhile, "width: 30%" mirrors the width of the post info div that we’re emulating, although this (and everything below) can be configured to your liking. Far be it from me to try to unduly influence your pullquotes’ appearance, but I will say that if you don’t like my style you could do worse than Mandarin Design’s "Feelin’ Groovy" tutorial.

At any rate, now that you’ve got your quotes styled, you may still be wondering how to use them. Fortunately, this is the easiest part. First, start writing a new post or edit one you’d like to add a pullquote to. Next, find an area where you’d like the quote to appear. Since our CSS doesn’t specify a vertical position for the pullquote, it will appear at the same part of the post that you position it in, just positioned to the left of the post itself. So if you want a quote to appear at the level of your third paragraph down, just get ready to add the markup there. The markup?

<div class="pullquote">The quoted text goes here.</div>

Note that if you’re quoting text from the post itself, that text will have to appear twice; once in the post and once in the quote. Wrapping the desired text in these div tags without duplicating it outside the tags will whisk your quotation off into the left column without a trace left behind in the main body.

Finally, a note on display: because Hemingway excerpts (or, more technically correctly, displays a teaser from) your posts on its front page, and since this tutorial targets a column that only exists when a single post is displayed, I can’t guess what would happen if one of your pullquotes ever made it up onto index.php. Your best bet is to use pullquotes exclusively after the <!–more–> tag to ensure that they only appear where they’re wanted.

Got all that? Now go nuts, and have the nicest Hemingway blog on the block!

“What an enchanted garden that would be for anybody lucky enough not to be able to read it!”