Hi I have recently converted some pages of ahtml5 up theme to Markup using pandoc for the Jekyll CMS. Everything went smooth except the images. They stretched out above the white part of my page where I want all my content to be. Doesn’t matter much on a 1920x1080 screen. But when you get down to mobile it’s a different story. It looks like this right now which isn’t great.
Anyway before I converted everything to markup there was was this one tag that could make the images in the blog fit inside the white space. Make them all responsive regardless of the device I use. “image fit.” I don’t know what it’s based on. Maybe the CSS object-fit property. Anyway if I introduce it in html it will look like this.
<a class="image fit"><img src="images/tonsley.jpg" alt="Idea for undercover multipurpose space"/></a>
If I remove it and use markup it would look like this.
{:width="925px"}
And as you notice I would like to take out the manual width. And have the “image fit” html class appear in a liquid forloop and generate at runtime for the html _site files so I don’t have to specify it in markup. I mean maybe I could just chuck html tags in the markup rather than being this pedantic but I’m concerned about any later side effects.
This is where I’m learning to do it. Looping in Liquid | CloudCannon Academy
This is what my loop looks like now in post.html.
---
layout: default
image_path: /images/
---
<h1>{{ page.title }}</h1>
<h2>Table of contents</h2>
{% include toc.html html=content %}
{% for image in site.static_files %}
{% if image.path contains 'images/' %}
<img src="{{ site.baseurl }}{{ image.path }}" class="image fit"/>
{% endif %}
{% endfor %}
{{ content }}
When I render it it will put every single image from every single blog post including the background of the page into the the same one I am on. At least they are responsive. But I just want it to match the ones in my folder structure. Not put every single image from every single sub folder of images onto the blog page. If it helps here is my project. Maybe I should just use the html tags for every class="image fit" instead if no one can help me. I’m just wondering if there could be any drawbacks here?
If it helps here is also my folder structure. I have the whole project on github-pages if anyone needed to access it, to test it out themselves. Though it uses jekyll so you want to make sure you install it. My portfolio blog where the problem lies
