Add plugin for Easier Image Embedding inside posts

[pourmand1376]

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

[pourmand1376]

I will submit a PR after a complete analysis.

[george-gca]

What was the point of this exactly? Is this still relevant?

[pourmand1376]

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.

[george-gca]

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.

[pourmand1376]

On Hugo, it is straightforward, just like the Github markdown.

![](myimage.png)

However, I do not know if this is even possible in jekyll

[george-gca]

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.

[pourmand1376]

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.

[george-gca]

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>

[george-gca]

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.

[george-gca]

Relevant alternatives:

https://github.com/rbuchberger/jekyll_picture_tag

https://github.com/pcouy/jekyll-picture-tag-ng