CODEWITHSUNDEEP
rubymarkdownjekyll
AGarrett
AGarrett

Reputation: 79

Jekyll render partial inside markdown

We are attempting to move sites to Jekyll, and have a BS4 theme. In order to make it user friendly to the content managers, I've placed the following in my page layout:

<div class="container">
     <div class="row">
          <div class="col-md-12">
                {{ content }}
          </div>
    </div>
</div>

However, I'd like to create a liquid tag or filter to allow for full-width images to be injected into the middle of the page. This would close the three container divs above the image, write out the image, and the create new divs below, and continue to write the markdown file. i.e.

{% fullwidth xenia-map.png %}

would produce something like this in the middle of the page:

       </div>
    </div>
</div>
<img src="input.jpg" class="img-responsive" />
<div class="container">
     <div class="row">
          <div class="col-md-12">

I have been able to create a filter and a tag (class) that will do 80%, however neither will write out closing tags at the beginning of the output. I just get the <img> tag.

Here's my class:

class FullWidth < Liquid::Tag
    def initialize(tag_name, image, tokens)
    super
    @image = image.strip
    end

    def render(context)
        "</div></div></div><img src='uploads/#{@image}' class='img-responsive'>"
    end
end

Liquid::Template.register_tag('fw', FullWidth)

Upvotes: 2

Views: 402

Answers (1)

Mr. Hugo
Mr. Hugo

Reputation: 12592

Your problem looks like an escaping issue.

Although I like the simplicity of your solution, I would consider two alternatives. The first ('include' solution) because it is easier to implement (anyone can make that one work). The second one ('javascript' solution) because it will allow your content editors to use a regular/graphical markdown editor and it will keep your markdown clean and reusable for other purposes.

'Include' solution

Just put an include in your markdown/html: 

{% include fullwidth.html image="/uploads/xenia-map.png" %}

... and use this 'fullwidth.html':

    </div>
  </div>
</div>
<img src="{{ include.image }}" class="img-responsive" />
<div class="container">
  <div class="row">
    <div class="col-md-12">

'Javascript' solution

Use this markdown (or let a regular/graphical markdown editor generate this):

![Xenia map](/uploads/xenia-map.png){: .fullwidth}

... and use this jQuery:

$(document).ready(function(){
  $('img.fullwidth').each(function() {
        var img = $(this).parent().html();
        $(this).unwrap();
        document.body.innerHTML = document.body.innerHTML.replace(img, 
            '</div></div></div>'+img+'<div class="container"><div class="row"><div class="col-md-12">');;
  });
});

Upvotes: 1

Related Questions