Black Hills Web Works

WordPress Websites for Churches, Nonprofits, and Small Businesses

Use a background image as a fallback when embedded Gists don’t appear

By · Published on

Sometimes the Gists just aren't there!Embedding Gists to display code snippets normally works great, and I wrote a post a few days ago explaining how to do that on a WordPress site or blog. But what about when, for whatever reason, your Gists don’t show up? I’ve seen it happen on this blog a few times, and just last week someone commented that my Gists had been removed from one of my tutorial posts.

I’m fairly certain it’s not just my blog this happens to – a few weeks ago I was on the StudioPress site looking for a Genesis code snippet and the code was missing from the page. I thought that was odd, but then I remembered to refresh the page and the “missing” embedded Gist with the code appeared on the page.

Give each Gist a linked heading

One of the first things I did to improve the embedded Gist experience for my users was to add a heading above each Gist describing what it was. Now if the Gist doesn’t appear at least the reader will (probably) know that there is supposed to be a Gist there.

My next improvement was to link that heading to the Gist itself so that the reader could still find it, although it wouldn’t be on my site.

Add a fallback background image to the Gists

I don’t know why embedded Gists don’t always work like they should, except that this is the Internet, and sometimes these things happen. Refreshing or reloading the page nearly always fixes the problem, but some folks don’t realize this and they think something is broken or missing from your post.

I was pondering this situation the other day when the idea occurred to me to use a background image that would be visible if and when the Gists don’t display, and the image could have a helpful message telling the user to refresh the page to see the Gists.

Making this happen was a matter of creating a quick image in Photoshop, adding a DIV container around the embedded Gist URL in the post editor, and then adding the CSS to make it work. The code below is what I came up with, and below that is the background image I’m currently using.

Gist – DIV container for embedded Gists

For embedded Gists to work they need to be on their own line in the WordPress text editor, and I’ve found that leaving a line between the opening and closing DIV tags and the URL itself will be preserved when you switch back and forth between the Visual and Text editor tabs.

Gist – CSS for embedded Gist background image

Background image to display when Gists don’t

Embedded Gist background image

Final thoughts

That’s what I’ve done so far to make using embedded Gists a better experience for everyone involved. What do you think? Are there more improvements that could be made when using Gists?