The Big Picture


The Big Picture

This is all about visual media after all...

Sometimes I get into weird OCD mode where I need to have something for better or worse. One of those things was a desire to break out of the mold of standard blog-type posts in articles for this site. I’ve sometimes found images are relegated to second-class citizens on some page layouts that don’t do them justice.

I couldn’t let that happen here. The problem was that I needed to do some things to make sure the typographic layouts were visually strong as well. This meant a adding control to width and layout of main text elements, with the downside of having to hack a bit to make images large. The solution I ended up with was to add a tag surrounding elements that I wanted to break out of the current layout. So I would end up with something like this:

Technically, in my case, I’m using the

tag with
, so my actual markup for full-width images looks like this:

A caption for my image

This let me capture that block in my processing when I build the site (metalsmith), and to modify the page code to accommodate what’s needed to make it full-width. The result of this is that I can now break images out of their containers to span the full width of a page, like this:

![Nikolaikirche, Leipzig, Germany by Pat David](upload://pCMhqz69OKrJ0jGTx9FwjubYOyQ.jpeg)

A view of Nikolaikirche in Leipzig, Germany.
For you darktable fans, that’s houz in the bottom right.

Of course, this can get very tiring very quickly. I find that it tends to break the flow of reading, so should be used sparingly and wisely in the context of the post or article. I promise not to abuse it.


It’s a small thing, but I’ve added an attribution line for the lede images that you’ll find in the bottom right of the actual image. I will also be incorporating the Creative Commons icon fonts to support proper attribution notice as well. Once I’ve done that, I will include a similar style attribution for other images (as it stands now, they can be put into the

image caption).

Video Killed the Radio Star

Of course, sometimes what is needed to really explain a concept is to use a video. So I couldn’t just ignore a way to get good video styling.

My first hurdle was to find a way to keep the video container fluid with the rest of the page. Remember, the page is built to be responsive, so it’s a single page served to all devices. This means that I need to adapt to all possible viewing device screen resolutions (as well as possible).

Getting images to scale and resize correctly to fit new sizes was easy. Doing the same thing for video is not as easy, but wasn’t too bad. Once again, I’m relying on the kindness of strangers…

The Code

The answer came in the form of an A List Apart article from 2009 by Thierry Koblentz. The basic premise was to create a box to contain the video embed, then to stretch the video to fill the box dimensions. Then I could still the box to be responsive just like the other elements.

So I wrapped the video embed in a container box, and added some CSS classes:

Then it was just a matter of styling by setting the padding property to be percentage based on th width of the container. To use a 16:9 ratio, the percentage should be 56.25%:

.fluid-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;

With the container styled, it was a simple matter to fill the container with the embedded video:

.fluid-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

Et voila! Fluid video embeds that hopefully should maintain responsiveness.

Of course, I couldn’t leave well enough alone, and to coincide with the previous idea of displaying larger images, I have also added a little extra to embiggen video embeds as well (not full width stretching, but to give it a bit more prominence).

@darix - when you get a moment, could you please see why the RSS parser might be turning < > and some other html entities into their representative code?

Right after this:

Should be a code block. On the actual page you can see how it should be correctly rendered:

<!-- FULL-WIDTH -->
<img src="http://to be full width.png"/>
<!-- /FULL-WIDTH -->

The entities seem to be correct in the feed.xml:


<p>So I would end up with something like this:</p> <pre><code class="lang-markup">&lt;!-- FULL-WIDTH --&gt; &lt;img src=&quot;http://to be full width.png&quot;/&gt; &lt;!-- /FULL-WIDTH --&gt; </code></pre>