Just one more thing for 2019

October 28th, 2019

One last thing I wanted to do with hero images for interviews. Now on larger (desktop / laptop sized) screens the interview title blurb is displayed on top of a translucent scrim along the bottom edge of the hero image. Maybe now I’m done for 2019…

As the follow-up to yesterday’s post about using edge-to-edge, full-width images in the interviews posted on this site, here’s the technical background on how this can be enabled in WordPress. First, add this snippet to your stylesheet:

.post .fullbleed {
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  height: auto;
  left: 50%;
}

What do we have here? We start with the vw unit which in CSS stands for viewport units. This snippet says that an element marked as fullbleed should be positioned relatively to its normal position, with the combination of position, left and margin-left positioning it to start at the left edge of the viewport and span the entire viewport width. The height attribute forces the layout engine to preserve the original aspect ratio of your image.

If you have a breakpoint for smaller screen sizes, add the following snippet as well (tweaking the max-width media selector based on your breakpoint):

@media (max-width: 480px) { 
  .post .fullbleed {
    max-width: 100vw;
  }
}

To make sure that an element marked as fullbleed continues spanning the entire viewport on smaller screens. From this point, any image marked with <img class="fullbleed"> will be shown in edge-to-edge, full-width mode. You can view such images in this interview.

The same technique can be applied to images that you want to appear wider than your main content column, but not necessarily full-width on larger screens. For example, here is the snippet for images that span 80% of the viewport width:

.post .halfbleed {
  width: 80vw;
  position: relative;
  margin-left: -40vw;
  height: auto;
  left: 50%;
}

Note that width and margin-left are updated to stay in “sync” (one as the double of the other), but left stays the same. On smaller screens, you can tweak such elements to span the full width of the viewport instead – overriding width and margin-left:

@media (max-width: 480px) { 
  .post .halfbleed {
    max-width: 100vw;
    width: 100vw;
    margin-left: -50vw;
  }
}

From this point, any image marked with <img class="halfbleed"> will be shown in 80% viewport width on larger screens, and in edge-to-edge, full-width mode on smaller devices. You can view such images in this post.

Finally, how do you display a full-width hero image at the very top of your post, before the title block? We start with a couple of custom fields. You can find the “Custom fields” block right under the main editor area when you add or edit your WordPress post. Here I’m going to use image_before_title_url and image_before_title_caption as the names for these two custom fields, but of course you’re free to use your own names, as long as they are used consistently.

First, you need to configure your theme to emit the hero image block if it has the information for it. This is a one-time operation. Open the wp-content/themes/your-theme-name/index.php file and locate this line: <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>  (which might look a little bit different depending on your theme). Add the following section right before this line:

<?php $hero_url = get_post_meta( get_the_ID(), 
      'image_before_title_url', true );
  if (is_single() and ($hero_url != '')) {
    echo '<img class="fullbleed" src="' . $hero_url . '"?>';
  }
?>

<?php $hero_caption = get_post_meta( get_the_ID(), 
      'image_before_title_caption', true );
  if (is_single() and ($hero_caption != '')) {
    echo '<span class="caption">' . $hero_caption . '</span>';
  }
?>

Next, upload your hero image to the media section. After it’s done uploading, do not choose to insert it into the post. Instead, copy the full URL of that uploaded image. Now go to the “Custom fields” block and add a new field named image_before_title_url with that copied URL as the value. Optionally, if you want to display a caption under that hero image, add another field named image_before_title_caption with the caption as the value.

What do we have here? The first snippet checks the presence of the image_before_title_url custom field associated with the current post. If that field is present, it also checks whether we’re emitting a single post. I personally found that displaying the hero image before the post title block makes browsing your main page a bit more disorienting. If both conditions hold, it emits the <img class="fullbleed"> element with the source pointing to that custom field value. The second snippet checks the presence of the image_before_title_caption custom field, and emits the corresponding span.

You can see how a full-width hero image before the title block looks like in this interview.

As I wrote late last year, software is never quite done. And so goes yet another year tweaking the presentation layer on this very site. Back in 2014 I’ve switched to using 2x / retina images on modern screens, going back to the archives and resourcing all the images in the interviews that have been published until then. From that point on, all the interviews published here showed higher-resolution images when appropriate. And yet, that wasn’t enough.

The film medium is by its very nature a visual one. Stills from film productions, be they movies or TV shows, demand the same full-width treatment as the production itself. I’ve spent most of my summer going back to older interviews and resourcing all the images (yet again) to even higher resolution. Now those stills are displayed in full-width, edge-to-edge format no matter what device you’re viewing them on. In addition, I’ve started to switch all the interviews to use the leading hero image that is displayed before the title block. Here is how it looks like on smaller, phone-sized screens:

And this is how it looks like on larger, laptop / desktop sized screens:

This is probably it for the 2019 edition of tending this little web garden of mine. What will the year 2020 bring?

Stay tuned for a more technical overview of how this can be achieved in WordPress.

Continuing the ongoing series of interviews with creative artists working on various aspects of movie and TV productions, it is my pleasure to welcome Learan Kahanov. In this interview he talks about collaboration between different departments, technological changes and breaking the political status quo in the world of storytelling, the multiple roles that a cinematographer must assume on set, and the importance of story. Around these topics and more, Learan dives deep into his work on “Madam Secretary” that is in the middle of its sixth and last season as we speak.


Learan Kahanov on sets.

Kirill: Please tell us about yourself and the path that took you to where you are today.

Learan: I was interested in the captured image since an early age. I played with cameras all through my school years. My mother is also a fine artist, and she went to art school when I was in middle school. So I found myself being dragged along to the darkroom as she did a minor in photography. While she was learning photography, I was learning photography. Eventually I got a camera and started shooting black-and-white stills.

After my mother graduated, she started teaching drawing classes. We had our own art studio, and she would hire models that would pose for her drawing classes. She offered me the opportunity to take pictures and I could do my own stuff.

I was always interested in pictures and imagery. I don’t actually remember the moment where it clicked that I wanted to be a filmmaker. Throughout growing up and in high school I worked at a Children’s Museum and I taught other younger kids how to do photography and photograms. Then I got into some video work and taught the kids how to use the video cameras, and we would make these little short films at the Museum. That’s what really sparked my interest and I quickly realized that filmmaking was the direction I wanted to go.

I went to my state school for photojournalism in order to create a portfolio to get into NYU film school. When I was at NYU, I went right away to all the professors and said that I have no interest in directing. I just wanted to do cinematography.

I think a lot of it came out of how I was raised. I’m first-generation American to Israeli parents; my mother being a fine artist and my dad didn’t have a typical job either. It was seeing the world in a little bit of a different way than the people I grew up with.

I wasn’t necessarily ever a cinephile or someone who studied film as a kid. But I was always interested in the emotional response of an image and the way an image could tell a story. That’s my memories of it as a kid and as a young adult.

When I was at NYU I shot as many films as I could. I also worked as an electrician and eventually a gaffer in the indie world in New York because I was always interested in lighting. Even the photography I was doing in high school and in college was a little more towards the art side of photography rather than the documentary. I was never the guy who walked around the street with a camera and did street photography or documentary style. For me it came more from a narrative storytelling point of view, and that’s why it was an easy transition to try to get into movies, music videos and commercials, and less documentaries.

My early career was basically shooting as many student films and indie films that I could, as well as working professionally as a gaffer. I always felt that I won’t always end lucky enough to have a gaffer who knows how I want things to be lit, so that was my angle – advancing through lighting.

Around 1999-2000 I decided to make a strong push to DP full-time. It was a lot of hard work, a lot of “no”‘s, a lot of low budget projects that did not make me a lot of money. I ended up shooting about a feature a year for eight years, and around 2007 I got into the Camera Union in NY. That parlayed into other television work, commercials and bigger projects, leading me to where I am today – finishing up the sixth season of “Madam Secretary” on CBS. I started the job as A-camera operator and additional cinematographer, and then on the third season took over the show fully.


Cinematography of “Madam Secretary”. Courtesy of CBS Broadcasting.

Kirill: If I went to your set today, what do you think would be the most unexpected or surprising thing for me as a viewer that knows only how the final product looks?

Learan: I wouldn’t say this would be specific to my set, but to film sets in general. It’s the amount of choreography that goes into making that final product, and the dance that we all do between the departments. Everyone has this special skillset that can work beautifully in tandem with everyone else to create this piece of art, or piece of entertainment, or whatever that product might be – however artistic or commercial you might want to call it. It’s amazing to see that team work, that collaboration in an industry that is far from democratic.

Filmmaking is not a democracy in its hierarchy, but it can’t be done without collaboration. It’s quite a beautiful thing how there’s all these levels of workers, bosses, managers and artisans – from producers to the directors to the production designers, and all the way down to the set technicians and PA’s. On the best jobs there’s such a synergy and a symbiotic way of working, it’s truly magical. You have to pull back the curtain to see how many people are involved, and how they relate to each other. It becomes a family.

We go to work and you become close, because you’re spending a lot of hours together. Often it’s more hours than most people do when they’re at their everyday job working in an office. It becomes a family, and I think that surprises a lot of people. It’s often separate from the final product of what are we creating. It’s that passion for creating something that everybody shares, whether it’s someone whose family’s been in the industry for many generations to a person like me who has no family in the industry, somebody who just decided I’m gonna go for it and break in.

Kirill: Looking at these first 20 years of your professional life, do you think it’s easier to get into the industry nowadays? The cameras are getting better and cheaper, and there are so many productions of so many different sizes. Does it feel like if you were starting today, maybe it would have been accessible?

Learan: A few months ago I went and talked to a class at School of Visual Arts in New York. I talked about my career, how do you break into the industry and what have you. My take is that it’s definitely more accessible these days to produce something- short film, TV pilot, feature film. It’s definitely easier and more accessible to create something.

That being said, I don’t know if it’s any easier to get into the industry. I think the industry still in many ways, both the good and the bad, is stuck in its ways of how things are produced, funded and distributed. You have all these streaming services, digital acquisition channels and digital distribution channels. There’s an increase in need for content, an accessibility for content and a yearning for content. My middle schooler son can make a short film and put it on YouTube for anyone who wants to see.

But as far as the industry is concerned, I think it’s still as difficult. The politics have not gone away – the who you know, and the where you’re from, and the where you’re going. There’s a lot of talent out there and talent alone isn’t going to get you there. In that sense the industry hasn’t changed that much, as far as breaking in.

The great part about these times is the accessibility of it all. The cameras are so accessible. You can do nonlinear editing on a laptop, along with sound design and visual effects work. It’s opened a lot of doors for a lot of young filmmakers, and for not so young filmmakers who want to break into the business later in life. The question is how do you “make it”. There’s a little bit of timelessness to how tough things still are.

I do think that’s true with any creative industry, whether it’s filmmaking, music or dance. There’s the old saying of where talent meets opportunity. That’s still true to this day. The great thing about where we are now is that because of the accessibility of the cameras and the gear, a lot more talented people have a voice, and can put their ideas and their stories out in the world. That was a lot harder to do 20 years ago, just for the simple fact that we all shot on film. There weren’t that many video cameras, especially any video cameras of high quality. It was a more select group of people who had that access.


Cinematography of “Madam Secretary”. Courtesy of CBS Broadcasting.

Continue reading »