Hi, today there isn’t any much progress about my blog. On the first I am just trying fix the next and prev navigation in the bottom of post page. Suddenly there I see something that isn’t important, but suddenly it become important. That ais about image on the post.

My thinking about Zola pagination. 

First, thing first, I really want to write this. There is pagination navigation that I want to create. If the current index - 2 is more than 0, it will create ••. The symbol will be added on the first and last of the pagination navigation. It also show the number of ± current_page_index. So I will try to implement it using Tera. Here is my code :

<nav class="pagination">
    {% if paginator.current_index - 2 > 1 %}
        &#8226;&#8226;
    {% endif %}
    {% if paginator.previous %}
        <a class="previous" href="{{ paginator.previous }}">{{ paginator.current_index - 1 }}</a>
    {% endif %}
    {% if paginator.current_index %}
        <a class="previous" href="{{ page.permalink }}">{{ paginator.current_index }}</a>
    {% endif %}
    {% if paginator.next %}
        <a class="next" href="{{ paginator.next }}">Next ›</a>
    {% endif %}
    {% if paginator.current_index + 2 < paginator.number_pagers %}
        &#8226;&#8226;
    {% endif %}
</nav>

Just learning something like that took almost half of my day.

Configuring image in the post. 

First time I don’t know about anything. And then my idea comeup to fix the image to show it 100% if the page screen got reduced. I fix that by adding this on my main.css

img {
  max-width: 600px;
  width: 100%;
}

On the first, I am got reversed about it, and the width of image always showing 100%. So, after I reverse the order, the image display it correctly. The worst thing happened after that, image with width < 500px diplayed very bad. The image always showing 100% with bad resolution. What I think after that is I must can configure image based on width. The condition is below :

1. If image width below 500 px, it will show original width
2. If image width more than 500 px, it will show 100% width if screen got reduced, otherwise it will show 600px width. It is already implemented.
3. Image with description will use shorcodes of zola. It will create good gallery with next and prev for only image with this category.
4. Image with hyperlink is better use shortcodes of zola instead of normal markdown.

For (1) and (2), I search it and finally found solution using javascript. I am learning how to get element with getElementByTagName, getElementById, getElementByAttribute. This is pretty useful to get the image size. Learning how manipulate DOM, by adding tag or replace the element in the DOM. Even I am also learning how to add CSS element with javascript. After that, I search again zola awesome feature. It can get width and height using [get_image_metadata](https://www.getzola.org/documentation/templates/overview/#get-image-metadata). I also found good resource how to configure image in markdown with tag this one and another one. Two of them is authored by the same author. Funtion resize_image on zola is also amazing. I think that I will don’t use javascript for this job. It make me doesn’t do dhuha pray, also because somehow afraid seeing snake in my dining room, I don’t sweep the floor again.

For 3 and 4, I am still doesn’t found a solution, but this template with amazing shortcode that focusing on image manipulation give me bright idea how I can manipulate images in zola.

Manipulating anchor 

On the first, I don’t know what is the function of anchor. After reading again I know that it is very useful for page navigation. Basically if it is useful for navigate from another page. Then I am also learning about unicode because oft that. I found good ascii list this is good for ascii art and this for bullet and anchor. Don’t forget to add something on the header to add unicode. W3C guide will show you how to do it.

<meta charset="utf-8"/>

OR

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

and also don’t forget to add another font variation in the CSS of @font-space in the body selector based on this guide. Font Courier New is really good for doing ascii art of this job.

Just learning this make me forget about time, and suddenly sudden death elecritty. I am sleep after that and just wake up at 16:45.

In the future I also must remake the pagination navigation of my post blog. I also want to tidying the table show in my post blog. Before that there is big task that I must do, that is divide CSS based on the template. Insert the CSS link on the header based on template. The more I deep dive in it, it will be look more awesome.

I also want to add color for different text with this approach.

**<r>Bold with colored writing.</r>**

r {color: red;}

Maybe this will be awesome though. This post clear my doubt on how to choose css selector child. This Guide is also more comprehensive.

Well, I don’t know what to do though. I am also must finding money again by work on chapta for internet bill. I also wanna finish read light novel of maou gakuen no hangyakusha first. There is many thing I want todo, but don’t know next haha.