responsive image on top of post using jekyll

Question

I recently started learning jekyll, and generating pages on localhost (win 7), I have installed a plugin that generates responsive images and HTML tags where the liquid tags are placed in pages or posts. here is the link to the plugin: https://github.com/wildlyinaccurate/jekyll-responsive-image

it does work fine and generate responsive images and proper tags for it.

but I have one image link on frontmatter, for every posting page, this link print an image on top of the posting page, and I want to have this image also treated as responsive images as well, liquid tags can not be added on frontmatter, as the result all images on top of post pages are not responsive, is there a way to make it work?

here is the example of frontmatter of one of my post:

---
layout: post
title:  "test for dog grooming"
categories: [ do-grooming ]
image: assets/images/dog.jpg
---

and here is the front matter tag I use in posts:

{% responsive_image figure: true path: assets/images/petfood.jpg  %}

thank you for your help

Bailey S Bailey S · Accepted Answer · 2020-09-12T22:34:16

I haven't used the plugin, but you should be able to access frontmatter variables through page.variable. You could then add the following code to the relevant area in your layout page to automatically show the image at the top of the page or where you want.

{% responsive_image figure: true path: page.image  %}

You can then remove or swap the other line in the layout page which creates the non-responsive image with this one.

Edit No.2: Looking over the plugin repo again I have noticed that they deal with variables in kind of an odd way. Since the responsive_image tag doesn't deal with variables at all. To do that you have to define a block like so:

# Put this in the layout file.
{% responsive_image_block %}
  path: {{ page.image }}
{% endresponsive_image_block %}

You should still be able to set the variable in the post file like so:

---
image: assets/images/dog.jpg
---

responsive image on top of post using jekyll

1 Answers