Open pourmand1376 opened 1 year ago
I will submit a PR after a complete analysis.
What was the point of this exactly? Is this still relevant?
It is helpful indeed. Adding an image is copy-pasting a block of code. This is not good for a blog writer. I want to make it like the way Hugo
does it.
But for now, I can not work on it.
Hpw does it work on Hugo? I made it work like this, replacing:
<div class="col-sm mt-3 mt-md-0">
{% include figure.html path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}
</div>
by
<div class="col-sm mt-3 mt-md-0">
<div markdown="1">
![]({{ "assets/img/7.jpg" | relative_url}}){:class="img-fluid rounded z-depth-1"}
</div>
</div>
Identation inside <div markdown="1">
affects the result. But it does not generate the same html, with all the webp images, of course. Also, I could not make it zoomable.
On Hugo, it is straightforward, just like the Github markdown.
![](myimage.png)
However, I do not know if this is even possible in jekyll
But that is what I just did above. It does support using it this way, but using markdown inside html elements is kind of tricky, that's why I had to add markdown="1"
to the div
element. But displaying images outside explicit html elements works like a charm.
That's indeed very good.
However, I think the most optimal way is when we have no template to memorize. Yours has a lot of divs and css and it is hard to memorize.
Let's see if anyone can convert this to a one-liner.
This was only necessary because of the layout of the post (with two images side by side). When using only one image it is ok to use it like this:
This is an example post with image galleries.
![]({{ "/assets/img/7.jpg" | relative_url }})
<div class="row mt-3">
<div class="col-sm mt-3 mt-md-0">
{% include figure.html path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% include figure.html path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
A simple, elegant caption looks good between image rows, after each row, or doesn't have to be there at all.
</div>
And if you want to use the classes to keep the layout:
This is an example post with image galleries.
![]({{ "/assets/img/7.jpg" | relative_url }}){:class="img-fluid rounded z-depth-1"}
<div class="row mt-3">
<div class="col-sm mt-3 mt-md-0">
{% include figure.html path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm mt-3 mt-md-0">
{% include figure.html path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
A simple, elegant caption looks good between image rows, after each row, or doesn't have to be there at all.
</div>
But I do like the current code that generates different image sizes. Don't know much about web dev, but seems to me like a good solution.
Relevant alternatives:
I suppose that this plugin can be useful for our project. We can put images in our posts just like we do in github markdown way. But I have to figure it out how to configure this thing.
https://github.com/hydecorp/jekyll-replace-img