Table of contents

  1. Constructing the full URL, i.e., without using relative_url
    1. Using only the built-in site.url and site.baseurl variables
    2. Adding the custom site.url_post_images variable
  2. Constructing a relative URL for the image

There are multiple ways to display an interior image (i.e., an image in the body of a post, rather than an image above the title of the post).

Constructing the full URL, i.e., without using relative_url

Using only the built-in site.url and site.baseurl variables

The following renders the image using Markdown with a full URL constructed by “{{site.url}}/{{site.baseurl}}/assets/images/posts/”:

![Bay Bridge]({{site.url}}{{site.baseurl}}/assets/images/posts/2023-04-02-Oakland-Bay-Bridge-east-span.avif)

Bay Bridge

Adding the custom site.url_post_images variable

It’s no fun (not to mention that it’s error prone) to have to type /assets/images/posts/ as part of the path every time we want to display an image.

So I defined a new, site-wide variable url_post_images in _config.yml:

url_post_images: "/assets/images/posts"

So we can now build the full URL by incorporating a reference to this new site-wide variable (instead of explicitly typing the string for which it stands: /assets/images/posts/).

Now, if ever the file/folder structure of the site changed, and the images for posts were moved, a single change to _config.yml would have back in business in no time.

The following renders the image using Markdown with a full URL constructed by “{{site.url}}/{{site.baseurl}}{{site.url_post_images}}/”:

![Bay Bridge]({{site.url}}{{site.baseurl}}{{site.url_post_images}}/2023-04-02-Oakland-Bay-Bridge-east-span.avif)

Bay Bridge

Constructing a relative URL for the image

The following renders the image using Markdown with a relative URL constructed by “ { {“/assets/images/posts/2023-04-02-Oakland-Bay-Bridge-east-span.avif”| relative_url }}” using relative_url:

Bay Bridge

However, I haven’t yet found a syntax by which I can both (a) use relative_url and (b) use site.url_post_images to avoid typing /assets/images/posts/.