For awhile now, I was wondering if it was possible to use Markdown, to make an image clickable. By that I mean, display an image in a blog post, and allow the reader to click that image to view the image in a tab. You can see an example at the end of this post.

So anyway, I know what the Markdown syntax is for a link and for an image, but I've never been able to put the two together until today.

Thanks to this post for the idea on how to do it. This saved me from having to write JavaScript that would find all the Snap.as images in a blog post, then wrap them in an <a></a> tag just to make the images clickable and open in a browser tab.

So just to recap, the Markdown syntax for a link is this: [Link text](Link URL)

And the Markdown syntax for an image is this: ![Alt Text for image](Image URL)

So, given the Markdown listed below for an image, how do you display the image and make it clickable at the same time? ![Mazda FC RX-7 - A little drifting action](https://i.snap.as/2IxnDguK.png)

There are two ways that I know of to customize the footer on a Write.as website. The first one is through CSS and the second one is through JavaScript. I'll go through those two options in this post.

Option 1: CSS

I got this idea of customizing the footer via CSS after looking at Robert Xu's Write.as powered site. It puzzled me that I could not highlight the text in the footer. After viewing the page source, I finally figured out that it was CSS trickery.

So, anyway here we are. To customize the footer using CSS, all you need to do is modify the following CSS script, then add it to the Custom CSS settings for your website.

footer nav::before {
    content: "Copyright © 2020 - 2021 by Your Name \A";
    white-space: pre-wrap;
}

Update 04/26/2021: I have since taken down my Journal Entries, so the links on this post won't work anymore. However, the idea and logic described in this post, is still applicable for posts that you wanted to add a Previous or Next link to.

In Part 1, I covered how I generated links to the Previous and Next post for my “indexed” journal entries. In this post, I'll talk about how I generated the links for non-indexed journal entries.

Handling Old Journal Entries

So, now that I have navigation working for my “indexed” entries. I turned my attention to my precursor journal entries. These entries don't use base 10 numbers as indexes in their slugs/URLs. For example, the post slug for Journal Entry – I ends in “I”, which is a roman numeral. Same goes for Journal Entry – II, III, IV and so on. To further complicate things, I decided to leave the post slugs unchanged for other precursor journal entries. The post slug for Journal Entry – XV for instance is still “decisions-decisions”. I thought about writing JavaScript that would convert roman numerals to base 10 numbers. But then that won't work for non-indexed entries like Journal Entry – XV.

Shot myself in the foot right there, huh? >_<

Update 06/22/2020: Didn't realize that the JavaScript that I talked about in this post, was actually creating a Next link for this post. It thought this was a Journal Entry post, because it found that text in here. That's hilarious, but that is also part of the fun of tinkering. I have fixed it.

Update 04/26/2021: I have since taken down my Journal Entries, so the links on this post won't work anymore. However, the idea and logic described in this post, is still applicable for posts that uses index numbers for post slugs. For a working example of this, check out the posts on my photo-blog.

Finally got full blog post navigation working for my Journal Entries. If you have JavaScript enabled on your browser, you could effectively navigate from Journal Entry – I up to Journal Entry – XVI, then continue on to Journal Entry – 001, all the way up to the latest one (as of this writing), Journal Entry – 060. You can also navigate from Journal Entry – 060, all the way back down to Journal Entry – I.

Getting Post Slug and Index

To make navigation work between blog posts in a series, I made use of a standard format for post slugs/URLs. I call them “indexed” entries because I added an index to the end of the slug/URL. For example, “journal-entry-001”, “journal-entry-002”, “journal-entry-003” and so on. It's really just a way to help me figure out the sequence of posts.

So, first off, here is the JavaScript for getting the post slug from the URL. Then from there, getting the post index from the slug. Without this code, it will be impossible to automatically generate the links to the Previous and Next posts.

var element = document.querySelector('meta[property="og:url"]');
var content = element && element.getAttribute("content");

// Get post slug
var postSlug = content.split('/').pop();
var postIndex = postSlug.split('-').pop();

Updated: 4/26/2021

Coney complained to me this morning that the YouTube videos on my latest music log entry were getting cut off when viewed from her phone. I've known about this issue for awhile, but didn't really try to find a solution for it. Well, today I did and it turns out to be really easy.

The issue stems from the fact that I have to use iframes to embed videos on write.as sites. To make the YouTube videos I embed on write.as sites responsive, I simply followed the instructions from this Responsive Youtube Embed post. Specifically, these are the changes I added to my journal.