Awwwards
Our Buffer Hack for Better Images's Hero Image

Our Buffer Hack for Better Images

It's no secret that we're big fans of the social media manager app Buffer. Buffer lets our whole team contribute to our social efforts by keeping our posting queue nice and organized. However, sometimes even the best tools require some workarounds to help us deal with edge cases that the creators never envisioned. We stumbled across one of these edge cases with our blog recently, and we've cooked up a clever little solution that we think you'll enjoy.

We use the Buffer browser extension whenever we post new content on our blog. It's a quick and easy way for us to get our content loaded into our Buffer queue. However, we kept running into this tiny problem: our blog post hero images would never show up in the browser extension.

At first, this wasn't a huge deal for us. But then, we realized that all of our Facebook posts shared the same couple of images. It turns out that Buffer was able to recognize and scrape the images from the related articles at the bottom of our posts, and was using those images instead of the correct one. With our problem identified, it was time to dive into our code.

Poking around the codebase, it was pretty easy to figure out the problem. In order for our hero images to take up the entire top of the screen and have text floated on them, we used CSS to set the background of our hero image div to be the photo instead of using an <img> tag.

<style>
#article-hero-img {
	background: linear-gradient(rgba(39, 42, 48, 0.6), rgba(39, 42, 48, 0.6)), url('/storage/cache/hero/blog_covers/IAg7p9PbG6Ni.jpeg') no-repeat center center;
	background-size: cover!important;
}
</style>

<div id="article-hero-img">
    <div class="article-meta">
        <h1>Write a Decent API Already!</h1>
        <div class="article-meta-details">
            <p>By Patrick Guevara
        		<br>on Sep 23, 2016
            </p>
        </div>
        <div class="label-group">
            <div class="label">
                <a href="https://metricloop.com/blog/tag/Software">
                	<i class="fa fa-tag"></i>Software
                </a>
            </div>
            <div class="label">
                <a href="https://metricloop.com/blog/tag/Laravel">
                	<i class="fa fa-tag"></i>Laravel
                </a>
            </div>
            <div class="label">
                <a href="https://metricloop.com/blog/tag/API">
                	<i class="fa fa-tag"></i>API
                </a>
            </div>
	    </div>
    </div>
</div> 

Now we had a choice, we could refactor everything and start using <img> tags, or we could simply add an <img> tag to the top of the page and hide it with some CSS. We ended up going with option 2 for a couple of reasons. First, we're working with the same 24 hours in a day as everyone else, and we didn't have the time for a big refactor. Second, it's a real pain to center text over a responsive image, so that refactor would involve some pretty intensive work or possibly a rework of our entire design. Lastly, the big problem I always had with our initial implementation was that it wasn't very accessible. People who use a screen reader wouldn't know about the image because it was essentially hidden from them. So, while the refactor would have certainly solved this problem, the solution we used also solves it. Putting this altogether, we ended up adding the following line of code to the top of the code block we mentioned earlier.

<img src="/storage/cache/hero/blog_covers/IAg7p9PbG6Ni.jpeg" class="sr-only" alt="Write a Decent API Already!'s Hero Image">

As you can see, when we Buffer today our images are pulled correctly.


Nick Basile's Profile Picture

Nick Basile


Lead UI/UX Engineer

Nick is the Lead UI/UX Engineer at Metric Loop. He lives in Austin, TX and spends his free time taking long strolls on South Lamar. If you see him, be sure to honk.