Reference Jekyll Post Image With Assets Plugin

For every blog post I specify an image that is shown on the front page. I also use the jekyll-feed plugin to generate an rss feed. This plugin uses the front matter information to generate the necessary meta-data. So the image front matter data is used to fill the <media:thumbnail> tag in the feed. But the jekyll-assets plugin don’t need fully qualified paths to the assets but just its name. So I needed to find a solution for this.

So I started with a front matter definition of the image like that:

---
image: ../jekyll-logo.png
---

And I called it into the asset tag

{% asset {{post.image}} %}

While that worked fine on the page I had the issue that the resulting feed.xml generated by jekyll-feed contained:

<media:thumbnail url="https://code-held.com/jekyll-logo.png"/>

But that was not the location of the original image since jekyll-assets looks for assets in predefined folders like /assets/images/ by default. Since this was my hierarchy as well and I wouldn’t want to have all my assets on the root folder I looked for another solution. So studying the liquid feed documentation I noticed the remove filter. With that it would be possible to define the image in the posts by its absolute path and get rid of it just in the rendering of the page. So I exchanged the example with:

---
image: ../assets/images/jekyll-logo.png
---

{% asset '{{post.image | remove "assets/images/"}}' %}

Now you get the best from both worlds. The asset plugin can maintain the image but in the feed plugin you still have the reference to the original image that can be interpreted by various rss readers.

Update

After further reading and fiddeling around to get mutliple magick arguments working I stumbled upon this comment . So now I call asset as a filter and do the operations like that:

{{ post.image | remove: "assets/images/" | asset: "magick:resize='600x' magick:gravity='center' magick:crop='600x300+0+0'" }}

Update 2

You can find the whole example in action in the source code of this page .